I'm programmaticaly create multiple dropzone and store it in an array.
How can we destroy an object to free up memory?

love the simplicity of the script!

I would like to ask if there is anyway to make a function creates "Done" button based on dropzone uploading. So if there is an uploading process going on the "Done" button will disappear otherwise it will be shown.

Is there any way to create event when e.g. 3 files (selected, dropped) has been uploaded successfully. I'd like to close popup and refresh opener after this.

Thanks a lot for this great tool.

Is this behaviour intended?

dropzone.on("uploadprogress", function(file, progress) {
  if (progress == 100) {
    console.log("Upload complete.");
  }
});

This results in two log outputs for that one upload in Google Chrome Mac OS.

Which event and how I should use to submit additional data on every singe file upload?

Hello!
I have a problem with dropzone.js, I always get the error "You do not have permission to access / dropzone / file-upload / on this server."
the fact is that I have the permissions of the file-upload folder to 777, anyone know how to fix it.
thank you very much

It seems to be that any image over 2 to 3 MB doesn't show the thumbnail preview when uploading or after uploading.

I don't understand coffeescript, thats why I didn't make a pullrequest.
For some reason the key and value of params are mixed up.

but on line 857 of the JS this
formData.append(name, key);
should be replaced with
formData.append(key, name);

After an onchange event of form fields outside of the dropzone, I execute

        Dropzone.options.mediaDropzone.params.type = parentTypeInput.val();
        Dropzone.options.mediaDropzone.params.parentId = parentIdInput.val();

Which results in the server receiving the key and value mixed up.

The title may be confusing somehow, but what I've meant is what you can see in the picture below

The error message went out of the edge. It's just "Width" matter I think !

Is it possible to clear the uploaded images with js? If not could that possibly be a future feature?

The documentation width gets to wide on smartphones.

when I upload a vertical image taken from my ipod this is shown horizontally, only about such images, nose happens if taken with an iphone or an ipad

It would be great to have a way to delete the files.
For the purpose of this plugin, it would be sufficient adding an "x" that point to a (predefined) url

• Extract the basic CSS and make it the component.css
• Take the current design, and create a css and spritemap for it.

What about download the just uploaded file? ;)

Showing this message is rather confusing for users that don't know that it should be a drag'n'drop area. It will result in a lot better user experience for users with unsupported browsers if it would just show the upload form.

A way to recreate a dropzone on an element. This can be done having a method to unload dropzone from the element and then recreate it again. Or a new method to reset the state of the dropzone including removing all image previews and removing 'started' class from the dropzone container.

Currently the above functionality can be accomplished with something like:

// remove old dropzone
$dropzoneContainer.empty();

// re-create dropzone div
$dropzoneContainer.append($('<div id="dropzone" class="dropzone"></div>'));

// create dropzone
$dropzoneContainer.find('#dropzone').dropzone({ url: '/upload', paramName: 'file_name' });

Might be missing this somewhere in the library, but would like to see any response sent from a server you upload to. Some REST services respond with a JSON object for each file uploaded, and would like to have access to that.

Played with the complete event and dumping the object to the console, but don't see the response I am looking for.

myDropzone.on("complete", function(file) {
console.log(file);
});

Hi enyo,

Thank you for providing such a library. I was wondering if there is any way to install it without using of "component". Also, do we have to use jquery with it or not ?

Thank you in advanced, and sorry for my weak English :)

• Check which browsers support the current upload form
• Provide the current fallback (without AJAX) for the browsers that don't (if any)

http://news.ycombinator.com/item?id=5247717

This way the use can decide when the file should be submitted.

Hello there,

I'm using Safari 5.1.7 on OS X 10.6.8 and the script says that it's just not supported. It's interesting because the supported browsers lists shows that if I have Safari 5+ that's fine.

I'm trying to get Dropzone to upload directly to Amazon S3 using CORS:

http://www.ioncannon.net/programming/1539/direct-browser-uploading-amazon-s3-cors-fileapi-xhr2-and-signed-puts/

For each upload, I need to be able to customize the url it uploads to and provide additional form data. Any tips on where would be best to do that?

Hey, I'm using Firefox 20.0a2 (Aurora) on Ubuntu, and on the demo site, drag and drop doesn't work. The box simply goes blank. Click to upload works fine. Drag and drop into a Chromium window works fine. In Firefox, I've tried disabling addons likely to break stuff (Flashblock, Ghostery, Adblock, HTTPS Everywhere), and even with all of those off, no luck.

Any thoughts? I'd assume Firefox is intended to be supported.

In my simple test the ".disable()" will disable only the drag&drop, but still allow the "onclick" feature.
And it allow to delete ( "removedfile" ) also.
I have not tested other features.

Here part of my code:

..
$(document).ready(function(){
var myDropzone = $("#dropform").data("dropzone");
myDropzone.on("addedfile", function(file) {
myDropzone.disable();
});
..
form id="dropform" action="/target" class='dropzone square'
....

I discovered "dropzone" an hour ago, maybe I made errors

DropzoneJS throws an error before I init any dropzones (no .dropzone elements in HTML sources as well).

It seems Requirejs doesn't deal with Dropzone that well.

My RequireJS shim looks like:

dropzone: {
    deps: [ 'jQuery' ],
    exports: [ 'Dropzone' ]
}

For sure we have to take a look on the fallback form. The first point is the form does not have the same "paramName" which will lead to upload the files somewhere else :D.

My second point is that that uploading process does not goes like the original upload, what I've meant is when the upload button got pressed the page navigate away to the provided URL without giving the same results !

Uncaught TypeError: Cannot read property 'previewTemplate' of undefined dropzone.js:504

I'm loading dropzone through requirejs: require(["/js/dropzone.js"], function() {}). I have requirejs set up to work with jquery.

What am I doing wrong?

For touch devices (or full screen apps)

Do you need to being using either Component or RequireJS to use Dropzone.js? It won't work for me without either.

http://news.ycombinator.com/item?id=5248338

When loading Dropzonejs with RequireJS and having a *.dropzone element in the loaded HTML, this will result in an "Uncaught TypeError: undefined is not a function".

This snippet is the source of the error

  o.fn.dropzone = function(options) {
    return this.each(function() {
      return new Dropzone(this, options); // throws error: Dropzone is undefined
    });
  };

  o(function() {
    return o(".dropzone").dropzone(); // call method that throws error
  });

  Dropzone = (function(_super) { // definition of Dropzone

And it is clear that when o(".dropzone") has length > 0 on load, it will fail because Dropzone is undefined.

When there is already a .fallback element inside a dropzone, Dropzone should remove it on startup or leave it as fallback instead of creating a new one. This way Dropzone would also work if JS was completely disabled. #52

This would enable dropzone to have the whole body element as a dropzone. It's quite easy to implement basically, but I want to implement correctly so that the "Drop files to upload" notices aren't generated without the user having to configure too much.

• Create a new "Drop files to upload" image
• Create new success and error icons. I'm not happy with them now. The half transparent circle looks a bit childish
• Decrease the border radius of the progress bar
• Transform the stripes to just half transparent white tones so the color is entirely determined by the css.
• Try out a few other ratios of the file image
• Deploy them all

All images will be retina enabled.

Hi, there is a way to stop dropzone accepting new files when a certain number where dropped?

I'm not talking about checking it in accept() and sending an error: this will create the thumbnail anyway.
What I'm saying is if there is a way to disable the file drop until one or more files in the dropzone are deleted (I've added to the thumbnails a button that, if pressed, remove the thumbnail and send a command via post-back for the server side deletion)?

Thanks and excuse me for my rough english.

Hi,

I would love the ability to be able to say that the dropzone only accepts, for example, image/jpeg, image/png, and image/gif.

I understand that I could implement this partially with one of the various callbacks but could I also prevent the upload from starting that way?

Thanks for your great work.
Leonard

It would be great to be able to use this with the Gravity Forms plugin for Wordpress! Just a thought http://www.gravityforms.com

When I add inputs for the form it looks like this

But when I try to click on the "Select or Input" to enter any value, the clickable area start functioning, and a dialog window open for selecting the file.

So I think it better to add "noPropagation(e)" for form's children. Is that right ?

• Create the images
• Implement CSS