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
16
votes
3 answers

Multiple Dropzone in a single page

I'm using Dropzone without creating a dropzone form. It works great for me in this way. But in this case I can not create another instance of Dropzone in my page. var myDropzone1 = new Dropzone( document.body, { url :…
mekafe
  • 596
  • 4
  • 13
  • 32
16
votes
4 answers

multipart File uploads using NodeJS

I am having troubles getting file uploads to work with NodeJS. I am using Dropzone.JS to create a form that sends a POST request to /file-upload here:
Then I…
Matt Hintzke
  • 7,744
  • 16
  • 55
  • 113
15
votes
1 answer

Dropzone JS - Chunking

I think I'm pretty close with this, I have the following dropzone config: Dropzone.options.myDZ = { chunking: true, chunkSize: 500000, retryChunks: true, retryChunksLimit: 3, chunksUploaded: function(file, done) { done(); …
Lee
  • 1,485
  • 2
  • 24
  • 44
15
votes
1 answer

How do I disable dropzone's automatic file upload?

I want to use dropzone to allow users to drag and drop file in, but I don't want dropzone to actually upload the files at any point. How do I disable this functionality in dropzone?
David says Reinstate Monica
  • 19,209
  • 22
  • 79
  • 122
15
votes
6 answers

redux action "is not a function" when dispatched from component

I am trying to create an app with a CSV upload. When a CSV is uploaded it will change the state and then I will parse from CSV to JSON and do stuff with it. The idea is to upload a file and update state. Once that state is updated I would pass the…
Brandon Baum
  • 155
  • 1
  • 1
  • 6
15
votes
3 answers

Enable copy and paste files in dropzone.js

I am using dropzone.js. I want to implement the "Copy & Paste" feature in it. What I tried is: Inside dropzone.js: paste: function(e) { Dropzone.prototype.emit("paste"); } Dropzone.prototype.paste = function(e) { var items, _ref; if ((e…
Vikash
  • 857
  • 1
  • 13
  • 32
15
votes
3 answers

Get count of selected files in dropzone

What I m trying to do is get a count of selected files in dropzone before upload them. var count= myDropzoneNST.getAcceptedFiles().length; I can get a count of uploaded files using this line, but What I m trying to do is to get count of selected…
Dumindu Madushanka
  • 494
  • 1
  • 9
  • 19
14
votes
3 answers

Getting file contents when using DropzoneJS

I really love the DropZoneJS component and am currently wrapping it in an EmberJS component (you can see demo here). In any event, the wrapper works just fine but I wanted to listen in on one of Dropzone's events and introspect the file contents…
ken
  • 8,763
  • 11
  • 72
  • 133
14
votes
6 answers

How to change url dropzone? URL dynamically with ajax success

I read this: https://github.com/enyo/dropzone/wiki/Set-URL-dynamically but i dont got success... :( I have 1 form... And i send the inputs with ajax. The ajax returns the new id of user. in this moment i want to change de url dropzone for to set…
Marcelo Pessoa
  • 141
  • 1
  • 1
  • 6
14
votes
3 answers

How do you enable Dropzone options? autoDiscover breaks Dropzone functionality

So, I tried following the solution here: Dropzone image upload options not working :( but, whenever I provide the option: Dropzone.autoDiscover = false; the dropzone goes from displaying the default drag'n'drop look to just text with a "Browse"…
Joshua Kemmerer
  • 1,553
  • 2
  • 14
  • 29
14
votes
4 answers

Dropzone.js remove link hidden behind pop-up message

I am using Dropzone.js to add file drag and drop functions to an upload form, and it looks good and all works great. However, when a file is rejected, if it is too large or not an allowed extension, the pop up error message hides the "remove" link,…
R2D2
  • 2,620
  • 4
  • 24
  • 46
14
votes
7 answers

How to get the Dropzone.js return value?

I just implemented Dropzone.js to make file uploads on my website easier. The file uploads fine, and after it finished uploading I give the file an id and return this id to the browser. This works fine, except for that I don't know how to catch the…
kramer65
  • 50,427
  • 120
  • 308
  • 488
14
votes
3 answers

How to make only the Dropzone.js Previews Div clickable and not the whole form

I have to use dropzone.js form, which sends a couple of inputs and a file upload info to the other page. My dropzone code looks like this -- > Dropzone.options.mydropzone = { maxFiles: 1, maxFilesize: 10, //mb acceptedFiles: 'image/*', …
Vishal Nair
  • 2,141
  • 3
  • 26
  • 39
13
votes
3 answers

Laravel Passport with Dropzonejs

I am working on a project that has an API layer which is running Laravel Passport. I have added the createFreshApiToken to my application and all of my jQuery ajax requests are working just fine. Today I am integrating DropzoneJS and when I try to…
Joseph Crawford
  • 1,470
  • 1
  • 15
  • 29
13
votes
3 answers

Dropzone.js prevents Flask from rendering template

I am using Dropzone.js to allow drag and drop upload of CSV files via a Flask web site. The upload process works great. I save the uploaded file to my specified folder and can then use df.to_html() to convert the dataframe into HTML code, which I…
user2242044
  • 8,803
  • 25
  • 97
  • 164