dropzone.js
tag and not theGitLab issues tracker. Only post an issue here if you think you discovered a bug or have a feature request.thumbnail(file, data)
and display the image wherever you likewindow.Dropzone
.dropzone
:action
attribute. The uploaded files can be handled just as ifthere would have been a html input like this:file
you can configure dropzonewith the option paramName
.fallback
that dropzone will remove if the browseris supported. If the browser isn’t supported, Dropzone will not create fallbackelements if there is a fallback element already provided. (Obviously, if thebrowser doesn’t support JavaScript, the form will stay as is)form
elements) by instantiating the Dropzone
classurl
option if you’re not using a form element,since Dropzone doesn’t know where to post to without an action
attribute.dropzone
class, then you don’tprogrammatically instantiate the objects, so you have to store the configurationsomewhere so Dropzone knows how to configure the dropzones when instantiatingthem.Dropzone.options
object.drop
you can overwrite the default drop
event handler.You should be familiar with the code if you do that because you can easily break the upload like this.If you just want to do additional stuff, like adding a few classes here and there, listen to the events instead!status
gets set to Dropzone.QUEUED
(after the accept
function check passes) which means that the file is nowin the queue.autoProcessQueue
set to true
then the queue is immediatelyprocessed, after a file is dropped or an upload finished, by calling.processQueue()
which checks how many files are currently uploading,and if it’s less than options.parallelUploads
, .processFile(file)
is called.autoProcessQueue
to false
, then .processQueue()
is never calledimplicitly. This means that you have to call it yourself when you want toupload all files currently queued.previewTemplate
which defaults to this:dz-preview
) gets the dz-processing
class when the file gets processed, dz-success
when the file got uploaded and dz-error
in case the file couldn’t be uploaded.In the latter case, data-dz-errormessage
will contain the text returned by the server.previewTemplate
config.file.previewElement
.previewTemplate
from scratch, you should put elements with the data-dz-*
attributes inside:data-dz-name
data-dz-size
data-dz-thumbnail
(This has to be an <img />
element and the alt
and src
attributes will be changed by Dropzone)data-dz-uploadprogress
(Dropzone will change the style.width
property from 0%
to 100%
whenever there’s a uploadprogress
event)data-dz-errormessage
addRemoveLinks
config), you can simply insert elementsin the template with the data-dz-remove
attribute. Example:.removeFile(file)
.This method also triggers the removedfile
event..removeAllFiles()
. Files that arein the process of being uploaded won’t be removed. If you want files that arecurrently uploading to be canceled, call .removeAllFiles(true)
which willcancel the uploads.autoProcessQueue
disabled, you’ll need to call .processQueue()
yourself.myDropzone.files
..getAcceptedFiles()
.getRejectedFiles()
.getQueuedFiles()
.getUploadingFiles()
.disable()
on the object. Thiswill remove all event listeners on the element, and clear all file arrays. Toreenable a Dropzone use .enable()
.confirm
calls,you can handle them yourself by overwriting Dropzone.confirm
..on(eventName, callbackFunction)
on your instance.init
function:previewTemplate
. I then added a fewadditional event listeners to make it look exactly like the reference. Rage: campaign edition 1 0 1.<img>
element when provided with image data (with the thumbnail
event),update the progress bar when the uploadprogress
event fires,show a checkmark when the success
event fires,etc..dz-message
and dropzonewill not create the message for you.params
option.file
object you can use when events fire. You canaccess file.width
and file.height
if it’s an image, as well asfile.upload
which is an object containing: progress
(0-100), total
(thetotal bytes) and bytesSent
.sending
event:file.previewElement
. Forexample:previewsContainer
option. The previewsContainer
should have thedropzone-previews
or dropzone
class to properly display the file previews.dropzone.js
tag.Only create an issue on Github when you think you found a bug or want tosuggest a new feature.previewTemplate
. Check out thenew one in the layout section.dz-
now to prevent clashing with other CSS definitionspreviewTemplate
is defined has changed. You have to provide data-dz-*
elements nowdict*
option for all of the visible messages