BBAssetsUpload

BBAssetsUpload is a JS plugin to allow drag and drop for multiple ajax assets uploading. It is based in BackboneJS

Demo page: play with the examples

Beware that the test server API JSON for this demo is a very fragile application that can fails. Also it is reseted time by time, so if you want a more stable testing evironment I encorage you to install the test server in your local machine

Use


new BBAssetsUpload({
  // (Required) The master URL for all the requests
  url: "http://wadus.com/assets/images",

  // (Required) reference to the DOM element where the file templates will be added
  listElement: $("#example-1 .images"),

  // (Required) reference to the DOM element where to drop files
  dropElement: $("#example-1 .drop"),

  // (Required) UnderscoreJS style template for files that are already uploaded
  assetTemplate: $("#template-file").html(),

  // (Required) UnderscoreJS style template for files that are beeing uploaded
  assetUploadingTemplate: $("#template-file-uploading").html(),

  // maximum file size in KB
  maxFileSize: 500,

  // list of accepted file extensions
  acceptFileTypes: "jpg, jpeg, png",

  // on start uploading callback
  onStart: function( asset ) {},

  // on progress uploading callback
  onProgress: function( asset ) {},

  // on success uploading callback
  onSuccess: function( asset ) {},

  // on error uploading callback
  onError: function( asset ) {}
});

Example 1

Drag images from your a local folder and drop them in the drop box. File types are limited to jpg, jpeg, png and file size is limited to 500KB by configuration.

Code toggle


new BBAssetsUpload({
  url: "http://bbassetsupload.herokuapp.com/assets/images",
  listElement: $("#example-1 .images"),
  dropElement: $("#example-1 .drop"),
  assetTemplate: $("#template-image").html(),
  assetUploadingTemplate: $("#template-image-uploading").html(),
  maxFileSize: 500,
  acceptFileTypes: "jpg, jpeg, png"
});

Drop image files here

Example 2

Drop any kind of files to the drop area. File size is limited to 500KB by configuration.

Code toggle


new BBAssetsUpload({
  url: "http://bbassetsupload.herokuapp.com/assets/files",
  listElement: $("#example-2 .files"),
  dropElement: $("#example-2"),
  assetTemplate: $("#template-file").html(),
  assetUploadingTemplate: $("#template-file-uploading").html(),
  maxFileSize: 500,
  onStart: function( asset ) { console.log( "starting upload", asset.get( "file" ).name ); },
  onProgress: function( asset ) { console.log( "progress upload", asset.get( "progress" ) ); },
  onSuccess: function( asset ) { console.log( "success upload", asset.get( "file" ).name ); },
  onError: function( asset ) { console.log( "error upload", asset.get( "file" ).name ); }
});