jQuery plug in has issues #65
geniuswebtools commented Mar 21, 2013
The jQuery plugin method has a problem.
I created a simple implementation, w/o any styling, because I just wanted to get it working before I messed with how it looks, but the dropzone isn’t visible.
To clarify the dropzone works. Now that I realize it’s a matter of the dropzone element not having a height, the issue appears to be the fact that the jQuery method does not show the dictDefaultMessage.
If it did, I’d be able to click on that and open the dialog, or drop files to it, but since the message didn’t show, the element had a zero height, and thus nothing to click 🙁
The text was updated successfully, but these errors were encountered:
enyo commented Mar 22, 2013
I’ll have a look at it. I strongly recommend to use the base CSS at least which provides basic layout for the dropzone.
geniuswebtools commented Mar 22, 2013
I tried to create the dropzone programmatically, and it fails to. I was going to open a new issue, but I think it’s related to the issue jQuery is having.
I think the problem is that the target element does not have the dropzone css class attached to it.
I get the same result (or lack of) with trying to use the class vs jQuery, and you’ve done a great job on error trapping so as I experiment w/ it, it let’s me know it won’t work.
If I add the dropzone class, and leave the jQuery or Class method in place I get the error letting me know dropzone is already attached.
Uncaught Error: Dropzone already attached.
I’ve looked in the code, and I can’t figure out where to add the dropzone css class. Every time I successfully modify your code to add the css class to the parent element, I keep getting the error that it’s already a dropzoen.
enyo commented Mar 23, 2013
Why do you want to create it programmatically? You can simply create a configuration for it and setup all your event listeners in the init option function. I think that would solve your problems.
enyo commented Mar 25, 2013
If you absolutely need to create the Dropzone programmatically, I can only suggest to add the class itself in the init function. That’s a bit of a hack, but I haven’t implemented an option for it yet (see #71). The code would look something like:
As I said though, the much cleaner and more elegant version would be to just create the configuration for it so Dropzone uses it when creating the Dropzone. Would look like this:
I’m closing this issue because IMO this is not a bug, but a missing feature at most. Feel free to continue the discussion if you disagree.
geniuswebtools commented Mar 26, 2013
Not to drag this into the ground, but the hack you provided, is essentially what I tried to do, and I get the Uncaught Error: Dropzone already attached. message when adding the class.
I got the same result when I tried to hack the dropzone.js file directly, and add the css class when the instance was created. (I would assume I did this in the wrong place though.)
When I attempt to use the Dropzone.forElement() method to assign the dropzone to a var, it’s always returns null. I added a console.log() statement in the forElement loop and the dropzone I passed form#listingPhoto shows up as form#listingPhoto.dropzone clickable when the instance is created.
Because I can’t match the element, I always get null.
I think the real issue is the autoloading for dropzone. I think all of my code executes before dropzone and unless I create a setInterval() method to detect it, and then add my code to the instance.
enyo commented Mar 26, 2013
If you don’t create your dropzone peogrammatically you won’t get the «Dropzone already attached» error. Have you tried the second solution I provided? It’s what everybody uses and it works. (Also please make sure that you are using the latest version of dropzone) if you’re still having trouble please post your source code.
mjza commented Apr 17, 2013
I have the same problem to make dropzone by ajax.
I made a div element at first.
geniuswebtools commented Apr 17, 2013
@mjza I resolved most of my issues by extending Dropzone from with in the init() method. I couldn’t extend Dropzone in instantiation because you get an uncaught exception error if your custom options aren’t listed in the Dropzone class.
Using the jQuery .on() method I was able to attach events listeners to the thumbnails. So in the end I was able to set a Maximum limit on the number of files to be uploaded by extending Dropzone in the init() method, and remove thumbnails from Dropzone w/ jQuery.
I still have a few things that need worked out, such as removing files from the queue once the max limit is reached, but all in good time.
Как я могу исправить эту ошибку» Dropzone уже прикреплена»?
у меня есть такой пример:
мне удалось создать эту форму, но, к сожалению, она не работает, потому что я получаю ошибку.
Я Dropzone.autoDiscover = false; но, к сожалению, все еще не работает.
не могли бы вы сказать мне, что вызывает эту проблему?
вы должны использовать
не так. По сути, то, что вы делаете, — это вызов одного и того же дважды.
определение ниже кода глобально поможет:
эта ошибка также может произойти, когда элемент уже имел класс dropzone .
однако если это будет удалено, то по какой-то причине стиль по умолчанию не будет применяться после запуска Dropzone. Мой единственный обходной путь-создать пользовательский стиль для этого элемента.
после поиска и попытки нескольких решений в сети, здесь я получил одно из лучших решений для решения этой проблемы.
Это мой хакерский обходной путь. Он в основном проверяет, загружается ли dropzone как DOM, а если нет, то он создаст его.
обновление: предлагается выяснить, почему dropzone инициируется дважды. Исправление это правильный путь, и этот ответ только технически-debtful временное решение.
я исправил эту проблему, отредактировав dropzone.js. просто зайдите на аэродром.JS и заменить
это решение первоначально найдено Haskaalo, размещенном на проблемы с github
иногда это потому, что у вас есть два элемента html с тем же id dropzone .
вы можете объединить свой идентификатор «myDrop» с некоторым уникальным значением для каждого экземпляра Dropzone.
Uncaught error dropzone already attached
I try to keep this FAQ as complete as possible. If you think that there is something missing, please contact me.
I get the error «Dropzone already attached.» when creating the Dropzone.
This is most likely due to the autoDiscover feature of Dropzone.
When Dropzone starts, it scans the whole document, and looks for elements with the dropzone class. It then creates an instance of Dropzone for every element found. If you, later on, create a Dropzone instance yourself, you’ll create a second Dropzone which causes this error.
So you can either:
- Turn off autoDiscover globally like this: Dropzone.autoDiscover = false; , or
- Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;
You don’t have to create an instance of Dropzone programmatically in most situations! It’s recommended to leave autoDiscover enabled, and configure your Dropzone in the init option of your configuration.
Why are large files not uploading?
There is a maxFilesize option in Dropzone which defaults to 256 (MB). Increase this to upload files bigger than that. If your files upload fine but aren’t stored on the server, then it’s due to your server configuration. Most servers limit the file upload size as well. Please check with the appropriate documentation.
Why are some image thumbnails not generated?
There is a maxThumbnailFilesize option in Dropzone which defaults to 10 (MB) to prevent the browser from downsizing images that are too big. Increase this to create thumbnails of bigger files.
How to get notified when all files finished uploading?
At the moment there isn’t a single event to do that, but you can listen to the complete event, which fires every time a file completed uploading, and see if there are still files in the queue or being processed.
There is a queuecomplete event now that fires when all files in the queue have been uploaded.
How to show an error returned by the server?
Very often you have to do some verification on the server to check if the file is actually valid. If you want Dropzone to display any error encountered on the server, all you have to do, is send back a proper HTTP status code in the range of 400 — 500.
In most frameworks those error codes are generated automatically when you send back an error to the client. In PHP (for example) you can set it with the header command.
Dropzone will then know that the file upload was invalid, and will display the returned text as error message.
If the Content-Type of your response is text/plain , you can just return the text without any further markup. If the Content-Type is application/json , Dropzone will use the error property of the provided object. Eg.:
How to add a button to remove each file preview?
Starting with Dropzone version 3.5.0, there is an option that will handle all this for you: addRemoveLinks . This will add an Remove file element to the file preview that will remove the file, and it will change to Cancel upload if the file is currently being uploaded (this will trigger a confirmation dialog).
You can change those sentences with the dictRemoveFile , dictCancelUpload and dictCancelUploadConfirmation options.
If you still want to create the button yourself, you can do so like this:
How to submit additional data along the file upload?
If your Dropzone element is a «>
I want to display additional information after a file uploaded.
To use the information sent back from the server, use the success event, like this:
How to show an image created by the server after upload
If your server generates an image (for example, you render a PDF on the server after upload), you can display that image easily once it uploads like this:
Let’s say your server responds with JSON like this:
How to show files already stored on server
Use own confirm implementation
If you are unhappy with the way Dropzone asks a user if she wants to cancel or remove a file, and want to use some other way (e.g.: bootstrap’s modal), you can simply overwrite the Dropzone.confirm function.
How can I limit the number of files
You’re in luck! Starting with 3.7.0 Dropzone supports the maxFiles option. Simply set it to the desired quantity and you’re good to go. If you don’t want the rejected files to be viewed, simply register for the maxfilesexceeded event, and remove the file immediately:
Provide a thumbnail for files
If you want to provide a thumbnail for files other than images, you can, by emitting the thumbnail event yourself.
Reject images based on image dimensions
This is a bit tricky. The «problem» is, that the image dimensions are only known after the thumbnail event fired, which could potentially happen after the file already uploaded since thumbnail creation is queued.
That’s why the accept function (which determines if the file should be rejected) is called before the dimensions are actually known. Fortunately the accept function is asynchronous, and can «wait» for the thumbnail event. This is why you need to put the accept callback in the file object so you can reference it after the thumbnail has been generated:
Dropzone offers the possibility to upload files in chunks. The relevant configuration options for this feature are:
- chunking which should be set to true
- forceChunking , if true, will always send a file in chunks, even if it is only one chunk
- chunkSize in bytes
- parallelChunkUploads , if true, the chunks will be uploaded simultaneously
- retryChunks , if true, the library will retry to upload a chunk if it fails
- retryChunksLimit defaults to 3
Then there are two important callbacks. The first one is: params which can be a function, that receives files , xhr and chunk as the first argument. If chunking is enabled, you know that files only contains that one file, and chunk is the object holding all the information about the current chunk. Example:
See the documentation for that parameter for more information or look at the source code for the default implementation.
The second important callback is chunksUploaded , which gets the file that finished uploading and the done function as second argument. Do whatever you need to do in that function, to tell the server that the file finished uploading and invoke the done() function when ready.