Questions tagged [dropzone.js]

An open-source javascript library which provides drag-and-drop file uploads with image previews

Dropzone.js is a light weight library that turns an element into a dropzone. This means that a user can drag and drop a file onto it, and the file is uploaded to the server by . It supports all major browsers (IE, FireFox, Chrome, Safari, Opera) natively and has legacy file input support for others.

Starting with version 2.0 this library no longer depends on , but it still registers itself as a module if available.

This tag should be used for questions about the usage of the Dropzonejs API in web development.

Relevant Links:

2258 questions
22
votes
5 answers

Is there a way to use default Word or PDF images/icons as the thumbnail rather than generic greyed out background?

I want to change the generic greyed out background for word/pdf files in dropzone file preview. This is the default view: Which is the best way to do it?
Gabriel Cerutti
  • 1,347
  • 1
  • 15
  • 17
22
votes
5 answers

How to invoke an error from server response (JSON) in Dropzone JS?

I have an uploader which rejects users' upload when they exceed their quota. The response is in JSON and it is as follow: {msg: "Upload limit reached", status: "error", code: "403"} The Dropzone JS options is as…
MK Yung
  • 4,344
  • 6
  • 30
  • 35
20
votes
4 answers

Non-ajax post using Dropzone.js

I'm wondering if there's any way to make Dropzone.js (http://dropzonejs.com) work with a standard browser POST instead of AJAX. Some way to inject the inputs type=file in the DOM right before submit maybe?
MZAweb
  • 311
  • 1
  • 2
  • 5
19
votes
5 answers

How do you test uploading a file with Capybara and Dropzone.js?

I've switched to using the Dropzone.js plugin for drag-and-drop file uploads. How can I write a Capybara test to ensure this functionality keeps on working? Previously I had a template with an input file element:
deepwell
  • 20,195
  • 10
  • 33
  • 39
19
votes
2 answers

How to run Dropzone processQueue() when not initiating programmatically?

Im trying to initiate dropzone by adding the class to the form like this :
Now dropzone works.…
THpubs
  • 7,804
  • 16
  • 68
  • 143
19
votes
5 answers

Is there a way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance?

I have a dropzone.js instance on a web page with the following options: autoProcessQueue:false uploadMultiple:true parallelUploads:20 maxFiles:20 It is programmatically instantiated, as it is part of a larger form. I have it rigged up to process…
ralbatross
  • 2,448
  • 4
  • 25
  • 45
19
votes
5 answers

Dropzone.js + Client Side Image Resizing

I want to integrate Dropzone.js with a Client Side Image Resizing. I know that there is a function to resize the thumbnail, but I would like to create a function to resize the main image before upload. Anyone could help me please?
Pedro Canelas
  • 301
  • 1
  • 2
  • 4
18
votes
1 answer

How to implement dropzone.js to upload file into Amazon s3 server?

Please help to implement the dropzone.js to upload the file into Amazon s3 server. Already referred the following link https://github.com/enyo/dropzone/issues/33, but, no idea to implement. kindly help to implement the same. Any dropzone…
18
votes
3 answers

Django and Dropzone.js

When I upload files with dropzone it adds them to the database, but they don't have a file, just an ID and creation date. I think the view is the problem but I've tried tons of stuff and I can't figure it out. See my edit below for a more detailed…
ss7
  • 2,902
  • 7
  • 41
  • 90
18
votes
3 answers

dropzone.js is giving error "Invalid dropzone element" on page without a dropzone

I'm using dropzone js and it's working great on pages that I require a dropzone. On any other page though it's giving me a "Invalid dropzone element" error message and causing issues with my other javascript. I have a custom JS file (which loads…
user1048676
  • 9,756
  • 26
  • 83
  • 120
18
votes
3 answers

Dropzone.js - How to change file name before uploading to folder

I am using DropzoneJS script for uploading images with drag & drop, but now I'm looking for a solution for how to add current timestamps with file name before uploading to the server folder, because I am not able to upload the same image if the file…
Mr.Happy
  • 2,639
  • 9
  • 40
  • 73
17
votes
4 answers

Using cropper.js before Dropzone.js send image to server

What I want to do here is before Dropzone.js send the dropped image to the server, a modal appears with cropper.js (fengyuanchen script) so the user can crop the image, and when image is cropped, send it with Dropzone.js to the server. So when i…
Fosfor
  • 331
  • 2
  • 3
  • 15
17
votes
6 answers

upload multiple files in one request Dropzone sending two requests

I am trying to send multiple files in one request using DropZone js. Here's my code : Dropzone.autoDiscover = false; var myDropzone = new Dropzone('#upload-Invoices', { paramName: "files", maxFilesize: 3.0, maxFiles: 4, …
SJMan
  • 1,547
  • 2
  • 14
  • 37
17
votes
3 answers

Adding more data to Dropzone.js post

So I have my implementation of this tutorial here: http://www.dropzonejs.com/bootstrap.html It is working great, and I'm uploading files just fine. What I want to do now is be able to send a user id along with the image in the POST data when…
dmarzio
  • 345
  • 1
  • 3
  • 9
17
votes
10 answers

How to disable clickable the form with Dropzone.js?

I'm using Dropzone.js to upload files to the server. I setting up my Dropzone maxFiles parameter to 10 and I was tried this: $('.dropzone').dropzone({ maxFiles: 10, init: function() { this.on('maxfilesreached', function() { …
netdjw
  • 5,419
  • 21
  • 88
  • 162