JS plugin to add a drag and drop multiple-images-upload with progress-indicator
JavaScript Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
lib
server
test
vendor
.gitignore
README.md
index.html
reset.css
style.css

README.md

BBAssetsUpload

JS plugin to allow drag and drop for multiple ajax assets uploading.

Check the demo page

## How it works

Just drop multiple files from your local folder to the drop area and the uploading will start inmediately.

BBAssetsUpload also provides a drag and drop reordering functionality.

BBAssetsUpload will deal with your server JSON API to:

  • fetch already existing files
  • upload new files
  • remove files
  • reorder files

Advantages

There are very powerfull jQuery file uploads out there but for one reason or another they were very complicated to me to understand and to customize to my own purposes.

So I decided to implement my own one based on BackboneJS and completely agnostic about templating and styling with CSS.

As you can see in the demo page the integration is very straight forward and the styling is completely up to you.

In the other hand this version is not properly tested, and only works in modern browsers, so use it under your own responsability.

Version

  • 0.0.3 (but already in production applications)

Usage

Basic configuration

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(),
});

Optional configuration

new BBAssetsUpload({
  // ... besides de Basic configuration

  // deactivate ordering, default is 'true'
  listSortable: false,

  // 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 ) {}
});

Server JSON API

BBAssetsUpload relieves in a JSON API like this:

  • (POST) master URL: create one or multiple images, return the list of new images
  • (GET) master URL: return the list of images
  • (POST) master URL/reorder: create a new order for the images
  • (DELETE) master URL: delete an image

Response format

In the server response is important to remember to:

  • Response in a JSON format
  • Response always the id of the Image
  • Try to not use the key url can be conflicts with the Backbone.Model.url.

Example of Rails controller

class Admin::PicsController < Admin::AdminController
  before_filter :load_performance

  def index
    @pics = @performance.pics.by_position
    render :json => @pics.map { |e| { :file_url => e.thumb(:admin), :id => e.id } }
  end

  def create
    @pic = @performance.pics.create!(:thumb => params[:file])
    render :json => { :file_url => @pic.thumb(:admin), :id => @pic.id }
  end

  def destroy
    @pic = @performance.pics.find(params[:id])
    @pic.destroy
    render :json => { :state => "ok" }
  end

  def reorder
    params[:ids].each_with_index do |id, index|
      @performance.pics.update_all(["position=?", index], ["id=?", id])
    end
    render :json => { :status => "ok" }
  end

  private

  def load_performance
    @performance = Performance.find(params[:performance_id])
  end
end

Browsers support

Tested in:

  • (OSX) Chrome 21.0.1180.57
  • (OSX) Firefox 8.0.1
  • (OSX) Safari 6.0

Dependencies

Install

1. Download the last version of the code.
2. Unzip the package
3. Copy vendor and lib folders to a public folder in your web application. Let's call it bbassetsupload.
4. Import the dependencies:
<script src="./bbassetsupload/vendor/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="./bbassetsupload/vendor/underscore.js" type="text/javascript" charset="utf-8"></script>
<script src="./bbassetsupload/vendor/backbone.js" type="text/javascript" charset="utf-8"></script>
<script src="./bbassetsupload/vendor/jquery.ui.js" type="text/javascript" charset="utf-8"></script>
<script src="./bbassetsupload/vendor/jquery.upload.js" type="text/javascript" charset="utf-8"></script>

Note: if you application is already importing some of the dependencies you have not to do it twice.

5. Import the bbassetsupload plugin:
<script src="./bbassetsupload/lib/bbassetsupload.js" type="text/javascript" charset="utf-8"></script>
6. You are ready!

Install the test Server JSON API

You can install the example server following this instructions

TODO

  • check in more browsers
  • Server
  • Server reste each 5 minutes
  • Explain server can not work
  • Processing messages doesn't work in files example
  • Support same file name

Attributions

Part of the most critical code is inspired in the work of Alex MacCaw who has offered it as MIT license.

This file for example: jquery.upload.js

License

MIT License

Copyright (c) 2012 Fernando Guillen Suarez

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.