Dropzone

dropzone.min.js

Overview

Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX. Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself.

Main features:

Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
Retina enabled
Multiple files and synchronous uploads
Progress updates
Support for large files
Complete theming. The look and feel of Dropzone is just the default theme. You can define everything yourself by overwriting the default event listeners.
Well tested

Usage

Include the following lines of code in the <head> section of your HTML:

											
												<!-- Load plugin -->
												<script src="assets/js/vendor/uploaders/dropzone.min.js"></script>

Add form element with attributes:

											
												<!-- Add form markup -->
												<form action="#" class="dropzone" id="dropzone_multiple"></form>

Call the plugin via JavaScript:

											
												// Multiple files
												let dropzoneMultiple = new Dropzone("#dropzone_multiple", {
													url: "#",
													paramName: "file", // The name that will be used to transfer the file
													dictDefaultMessage: 'Drop files to upload or CLICK',
													maxFilesize: 0.1 // MB
												});

Plugin options

Option	Default	Description
Core options
`url`	`null`	Has to be specified on elements other than form (or when the form doesn't have an action attribute). You can also provide a function that will be called with files and must return the url (since v3.12.0)
`method`	`"post"`	Can be changed to `"put"` if necessary. You can also provide a function that will be called with files and must return the method (since v3.12.0).
`withCredentials`	`false`	Will be set on the XHRequest.
`timeout`	`null`	The timeout for the XHR requests in milliseconds (since v4.4.0). If set to null or 0, no timeout is going to be set.
`parallelUploads`	`2`	How many file uploads to process in parallel (See the Enqueuing file uploads documentation section for more info)
`uploadMultiple`	`false`	Whether to send multiple files in one request. If this it set to true, then the fallback file input element will have the multiple attribute as well. This option will also trigger additional events (like `processingmultiple`). See the events documentation section for more information.
`chunking`	`false`	Whether you want files to be uploaded in chunks to your server. This can't be used in combination with `uploadMultiple`. See [chunksUploaded](#config-chunksUploaded) for the callback to finalise an upload.
`forceChunking`	`false`	If `chunking` is enabled, this defines whether every file should be chunked, even if the file size is below `chunkSize`. This means, that the additional chunk form data will be submitted and the `chunksUploaded` callback will be invoked.
`chunkSize`	`2000000`	If `chunking` is `true`, then this defines the chunk size in bytes.
`parallelChunkUploads`	`false`	If `true`, the individual chunks of a file are being uploaded simultaneously.
`retryChunks`	`false`	Whether a chunk should be retried if it fails.
`retryChunksLimit`	`3`	If `retryChunks` is `true`, how many times should it be retried.
`maxFilesize`	`256`	The maximum filesize (in bytes) that is allowed to be uploaded.
`paramName`	`"file"`	The name of the file param that gets transferred. NOTE: If you have the option `uploadMultiple` set to `true`, then Dropzone will append [] to the name.
`createImageThumbnails`	`true`	Whether thumbnails for images should be generated
`maxThumbnailFilesize`	`10`	In MB. When the filename exceeds this limit, the thumbnail will not be generated.
`thumbnailWidth`	`120`	If `null`, the ratio of the image will be used to calculate it.
`thumbnailHeight`	`120`	The same as `thumbnailWidth`. If both are null, images will not be resized.
`thumbnailMethod`	`"crop"`	How the images should be scaled down in case both, `thumbnailWidth` and `thumbnailHeight` are provided. Can be either `contain` or `crop`.
`resizeWidth`	`null`	If set, images will be resized to these dimensions before being uploaded. If only one, `resizeWidth` or `resizeHeight` is provided, the original aspect ratio of the file will be preserved. The `options.transformFile` function uses these options, so if the transformFile function is overridden, these options don't do anything.
`resizeHeight`	`null`	See `resizeWidth`.
`resizeMimeType`	`null`	The mime type of the resized image (before it gets uploaded to the server). If `null` the original mime type will be used. To force jpeg, for example, use `image/jpeg`. See `resizeWidth` for more information.
`resizeQuality`	`0.8`	The quality of the resized images. See `resizeWidth`.
`resizeMethod`	`"contain"`	How the images should be scaled down in case both, `resizeWidth` and `resizeHeight` are provided. Can be either `contain` or `crop`.
`filesizeBase`	`1000`	The base that is used to calculate the displayed filesize. You can change this to 1024 if you would rather display kibibytes, mebibytes, etc... 1024 is technically incorrect, because 1024 bytes are 1 kibibyte not 1 kilobyte. You can change this to 1024 if you don't care about validity.
`maxFiles`	`null`	If not `null` defines how many files this Dropzone handles. If it exceeds, the event `maxfilesexceeded` will be called. The dropzone element gets the class `dz-max-files-reached` accordingly so you can provide visual feedback.
`headers`	`null`	An optional object to send additional headers to the server. Eg: `{ "My-Awesome-Header": "header value" }`
`clickable`	`true`	If `true`, the dropzone element itself will be clickable, if `false` nothing will be clickable. You can also pass an HTML element, a CSS selector (for multiple elements) or an array of those. In that case, all of those elements will trigger an upload when clicked.
`ignoreHiddenFiles`	`true`	Whether hidden files in directories should be ignored.
`acceptedFiles`	`null`	The default implementation of `accept` checks the file's mime type or extension against this list. This is a comma separated list of mime types or file extensions. Eg.: `image/*,application/pdf,.psd`. If the Dropzone is `clickable` this option will also be used as [accept](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept) parameter on the hidden file input as well.
`autoProcessQueue`	`true`	If `false`, files will be added to the queue but the queue will not be processed automatically. This can be useful if you need some additional user input before sending files (or if you want want all files sent at once). If you're ready to send the file simply call `myDropzone.processQueue()`.
`autoQueue`	`true`	If `false`, files added to the dropzone will not be queued by default. You'll have to call `enqueueFile(file)` manually.
`addRemoveLinks`	`false`	If `true`, this will add a link to every file preview to remove or cancel (if already uploading) the file. The `dictCancelUpload`, `dictCancelUploadConfirmation` and `dictRemoveFile` options are used for the wording.
`previewsContainer`	`null`	Defines where to display the file previews – if `null` the Dropzone element itself is used. Can be a plain `HTMLElement` or a CSS selector. The element should have the `dropzone-previews` class so the previews are displayed properly.
`disablePreviews`	`false`	Set this to `true` if you don't want previews to be shown.
`hiddenInputContainer`	`"body"`	This is the element the hidden input field (which is used when clicking on the dropzone to trigger file selection) will be appended to. This might be important in case you use frameworks to switch the content of your page. Can be a selector string, or an element directly.
`capture`	`null`	If `null`, no capture type will be specified If camera, mobile devices will skip the file selection and choose camera If microphone, mobile devices will skip the file selection and choose the microphone If camcorder, mobile devices will skip the file selection and choose the camera in video mode On apple devices multiple must be set to false. AcceptedFiles may need to be set to an appropriate mime type (e.g. "image/", "audio/", or "video/*").
`renameFile`	`null`	A function that is invoked before the file is uploaded to the server and renames the file. This function gets the `File` as argument and can use the `file.name`. The actual name of the file that gets used during the upload can be accessed through `file.upload.filename`.
`forceFallback`	`false`	If `true` the fallback will be forced. This is very useful to test your server implementations first and make sure that everything works as expected without dropzone if you experience problems, and to test how your fallbacks will look.

Plugin events

Do not overwrite those as configuration options, unless you know what you're doing:

Event	Description
All of these receive the `event` as first parameter:
`drop`	The user dropped something onto the dropzone
`dragstart`	The user started to drag anywhere
`dragend`	Dragging has ended
`dragenter`	The user dragged a file onto the Dropzone
`dragover`	The user is dragging a file over the Dropzone
`dragleave`	The user dragged a file out of the Dropzone
All of these receive the `file` as first parameter:
`addedfile`	When a file is added to the list
`removedfile`	Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to
`thumbnail`	When the thumbnail has been generated. Receives the `dataUrl` as second parameter
`error`	An error occured. Receives the `errorMessage` as second parameter and if the error was due to the XMLHttpRequest the xhr object as third
`processing`	When a file gets processed (since there is a queue not all files are processed immediately)
`uploadprogress`	Gets called periodically whenever the file upload progress changes. Gets the progress parameter as second parameter which is a percentage (0-100) and the `bytesSent` parameter as third which is the number of the bytes that have been sent to the server. When an upload finishes dropzone ensures that `uploadprogress` will be called with a percentage of 100 at least once. Warning: This function can potentially be called with the same progress multiple times
`sending`	Called just before each file is sent. Gets the xhr object and the `formData` objects as second and third parameters, so you can modify them (for example to add a CSRF token) or add additional data
`success`	The file has been uploaded successfully. Gets the server response as second argument
`complete`	Called when the upload was either successful or erroneous
`canceled`	Called when a file upload gets canceled
`maxfilesreached`	Called when the number of files accepted reaches the `maxFiles` limit
`maxfilesexceeded`	Called for each file that has been rejected because the number of files exceeds the `maxFiles` limit
All of these receive a list of files as first parameter and are only called if the `uploadMultiple` option is `true`:
`processingmultiple`	See `processing` for description
`sendingmultiple`	See `sending` for description
`successmultiple`	See `success` for description
`completemultiple`	See `complete` for description
`canceledmultiple`	See `canceled` for description
Special events:
`totaluploadprogress`	Called with the total uploadProgress (0-100), the `totalBytes` and the `totalBytesSent`. This event can be used to show the overall upload progress of all files
`reset`	Called when all files in the list are removed and the dropzone is reset to initial state
`queuecomplete`	Called when all files in the queue finish uploading

Plugin info

Property	Description
File name	dropzone.min.js
Location	assets/js/vendor/uploaders/
Links	Official plugin website Full documentation Github project page

Property

Description

File name

dropzone.min.js

Location

assets/js/vendor/uploaders/

Links

Official plugin website

Full documentation

Github project page

Plupload

/uploaders/plupload/

Overview

Plupload is a cross-browser multi-runtime file uploading API. Basically, a set of tools that will help you to build a reliable and visually appealing file uploader in minutes.

Historically, Plupload comes from a dark and hostile age of no HTML5, hence all the alternative fallbacks, Silverlight and Java. It is meant to provide an API, that will work anywhere and in any case, in one way or another. While having very solid fallbacks, Plupload is built with the future of HTML5 in mind.

Usage

Include the following lines of code in the <head> section of your HTML:

											
												<!-- Load jQuery -->
												<script src="assets/js/jquery/jquery.min.js"></script>

												<!-- Load plugin -->
												<script src="assets/js/vendor/uploaders/plupload/plupload.full.min.js"></script>

												<!-- Load plugin extension -->
												<script src="assets/js/vendor/uploaders/plupload/plupload.queue.min.js"></script>

Add element with attributes:

											
												<!-- All runtimes example -->
												<div class="file-uploader">
													<p>Your browser doesn't have Flash installed.</p>
												</div>

Call the plugin via JavaScript:

											
												// All runtimes example
												$(".file-uploader").pluploadQueue({
												    runtimes: 'html5, html4,  Silverlight',
												    url: 'assets/demo/data/uploader/plupload.json',
												    chunk_size: '300Kb',
												    unique_names: true,
												    filters: {
												        max_file_size: '300Kb',
												        mime_types: [{
												            title: "Image files",
												            extensions: "jpg,gif,png"
												        }]
												    },
												    resize: {
												        width: 320,
												        height: 240,
												        quality: 90
												    }
												});

Plupload documentation

Complete Plupload documentation can be found online on Official library website. It's quite big, with a lot of options, events, methods and file filters. Also check out FAQ section and translating options.

Plugin info

Property	Description
File name	plupload.full.min.js, moxie.min.js, plupload.queue.min.js
Location	assets/js/vendor/uploaders/plupload/
Links	Official plugin website Full documentation Github project page

Property

Description

File name

plupload.full.min.js, moxie.min.js, plupload.queue.min.js

Location

assets/js/vendor/uploaders/plupload/

Links

Official plugin website

Full documentation

Github project page

Bootstrap file upload

fileinput.min.js

Overview

An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects.
In addition, it includes AJAX based uploads, dragging & dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.

Usage

Include the following lines of code in the <head> section of your HTML:

											
												<!-- Load jQuery -->
												<script src="assets/js/jquery/jquery.min.js"></script>

												<!-- Load Bootstrap -->
												<script src="assets/js/bootstrap/bootstrap.bundle.min.js"></script>

												<!-- Load plugin -->
												<script src="assets/js/vendor/uploaders/fileinput/fileinput.min.js"></script>

Add file input element with attributes:

											
												<!-- Single file -->
												<input type="file" class="file-input">

												<!-- Multiple files -->											
												<input type="file" class="file-input" multiple="multiple">

Call the plugin via JavaScript:

											
												// Basic setup
												$('.file-input').fileinput({
													browseLabel: 'Browse',
													browseIcon: '<i class="ph-file-plus me-2"></i>',
													uploadIcon: '<i class="ph-file-arrow-up me-2"></i>',
													removeIcon: '<i class="ph-x fs-base me-2"></i>',
													layoutTemplates: {
														icon: '<i class="ph-check"></i>'
													},
													uploadClass: 'btn btn-light',
													removeClass: 'btn btn-light',
													initialCaption: "No file selected",
													previewZoomButtonClasses: previewZoomButtonClasses,
													previewZoomButtonIcons: previewZoomButtonIcons,
													fileActionSettings: fileActionSettings
												});

Bootstrap file input documentation

Complete BS file input documentation can be found online on Official library website. It's quite big, with tons of options, events, methods and AJAX uploads options.

Plugin info

Property	Description
File name	fileinput.min.js
Location	assets/js/vendor/uploaders/fileinput/
Links	Official plugin website Full documentation Github project page

Property

Description

File name

fileinput.min.js

Location

assets/js/vendor/uploaders/fileinput/

Links

Official plugin website

Full documentation

Github project page

Limitless

Dropzone

Overview

Usage

Plugin options

Plugin events

Plugin info

Plupload

Overview

Usage

Plupload documentation

Plugin info

Bootstrap file upload

Overview

Usage

Bootstrap file input documentation

Plugin info

On this page