dropzone

What is dropzone?

Dropzone is a JavaScript library that provides drag-and-drop file uploads with image previews. It is highly customizable and easy to integrate into web applications.

What are dropzone's main functionalities?

Basic File Upload

This code demonstrates how to create a basic Dropzone instance for file uploads. It specifies the URL to which files will be uploaded, the parameter name for the file, the maximum file size, and the accepted file types.

const Dropzone = require('dropzone');

// Create a Dropzone instance
const myDropzone = new Dropzone('#my-dropzone', {
  url: '/file/post',
  paramName: 'file',
  maxFilesize: 2, // MB
  acceptedFiles: '.jpeg,.jpg,.png,.gif'
});

Custom Preview Template

This code demonstrates how to create a Dropzone instance with a custom preview template. The template defines the HTML structure for the file preview, including elements for the thumbnail, file name, file size, progress bar, and error/success messages.

const Dropzone = require('dropzone');

// Custom preview template
const previewTemplate = `
  <div class="dz-preview dz-file-preview">
    <div class="dz-image"><img data-dz-thumbnail /></div>
    <div class="dz-details">
      <div class="dz-size"><span data-dz-size></span></div>
      <div class="dz-filename"><span data-dz-name></span></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <div class="dz-success-mark"><span>✔</span></div>
    <div class="dz-error-mark"><span>✘</span></div>
  </div>
`;

// Create a Dropzone instance with custom preview template
const myDropzone = new Dropzone('#my-dropzone', {
  url: '/file/post',
  previewTemplate: previewTemplate
});

Event Handling

This code demonstrates how to handle various events in Dropzone. It shows how to log messages when a file is added, track the upload progress, and handle successful uploads.

const Dropzone = require('dropzone');

// Create a Dropzone instance
const myDropzone = new Dropzone('#my-dropzone', {
  url: '/file/post'
});

// Event handling
myDropzone.on('addedfile', function(file) {
  console.log('File added:', file.name);
});

myDropzone.on('uploadprogress', function(file, progress) {
  console.log('Upload progress:', progress);
});

myDropzone.on('success', function(file, response) {
  console.log('File uploaded successfully:', response);
});

Other packages similar to dropzone

react-dropzone

React Dropzone is a simple React component for creating a file dropzone. It provides a flexible and customizable way to handle file uploads in React applications. Compared to Dropzone, it is specifically designed for React and offers a more seamless integration with React's component-based architecture.

fine-uploader

Fine Uploader is a JavaScript library for file uploads that supports multiple file selection, drag-and-drop, and image previews. It offers a wide range of customization options and supports various back-end technologies. Compared to Dropzone, Fine Uploader provides more advanced features and greater flexibility but may require more configuration.

uppy

Uppy is a modular file uploader for web applications. It supports drag-and-drop, file previews, and resumable uploads. Uppy is highly customizable and can be extended with various plugins. Compared to Dropzone, Uppy offers a more modern and modular approach to file uploads, making it suitable for complex use cases.

README

Dropzone.js Version 0.2.0

Dropzone.js is a light weight JavaScript library for ender 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.

Main features

• Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
• Multiple files and synchronous uploads
• Progress updates
• Support for large files

Usage

Implicit creation:

<form action="/target" class="dropzone"></form>

That's it. Really!

Dropzone will automatically attach to it, and handle file drops.

Want more control? You can instantiate dropzone manually like this:

$("div#my-zone").dropzone({ ...configuration... });

Note that dropzones don't have to be forms. But if you choose another element you have to pass the url parameter in the options.

For configuration options please look at the source line 52.

Register for events

I use bean to manage events. If you want to register to some event you can do so on the dropzone object itself:

var myDropzone = $("div#my-zone").dropzone({ ...configuration... });
bean.add(myDropzone, "error", function(file, message) { alert(message); });

For a list of all events, please look at the source line 25.

Browser support

• Chrome 7+
• Firefox 4+
• IE 10+
• Opera 12+
• Safari 5+

Why another library?

I realize that there are already other libraries out there but the reason I decided to write my own are the following:

• I didn't want it to be too big, and to cumbersome to dive into.
• I want to design my own elements. I only want to register callbacks so I can update my elements accordingly.
• Big files should get uploaded without a problem.
• I wanted a callback for image previews, that don't kill the browser if too many to big images are viewed.
• I want to use the latest API of browsers. I don't care if it falls back to the normal upload form if the browser is too old.