Dropzone.js & rails

Dropzone.js

• JavaScript library
• Drag 'n drop file uploads met image previews
• Maakt geen gebruik van andere libraries
• Upload via ajax

Features

• Thumbnail previews
• Retina enabled
• Meerdere bestandsuploads tegelijk
• Voortgangsindicator
• Ondersteuning voor grote bestanden
• Qua style volledig aan te passen
• (Schijnt) goed getest te zijn

Form

• Dropzone werkt via het form
• Uploaden van bestanden zelf fixen
   

<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>

Configuratie

​

// "myAwesomeDropzone" is the camelized version of the ID of your HTML element
Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };

// instantiate manually
new Dropzone("div#my-dropzone", { /* options */ });

EVENTS

​

Dropzone.options.myDropzone({
  init: function() {
    this.on("error", function(file, message) { alert(message); });
  }
});

// or if you need to access a Dropzone somewhere else:
var myDropzone = Dropzone.forElement("div#my-dropzone");
myDropzone.on("error", function(file, message) { alert(message); });

Browser support

• Chrome 7+

• Firefox 4+

• IE 10+

• Opera 12+

• Safari 6+

• Oldschool input als fallback

DEMO