Dropzone
An easy to use drag'n'drop library. It supports image previews and shows nice progress bars.
You can use the dropzone class to turn an element into a dropzone. This will create a Dropzone instance on the element that looks like this:
Dropzone.options.dropzone1 = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
// maxFiles: 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
dictRemoveFile: "Remove",
dictFileTooBig: "Image is bigger than 2MB",
// dictMaxFilesExceeded: "You can only upload upto 3 images",
dictInvalidFileType: "You can only upload images",
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeFile(file);
});
}
};<form action="/file-upload" class="dropzone"id="dropzone1">
<input type="file" name="file" />
</form>