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 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.

---

If you want support, please use stackoverflow with the dropzone.js tag and not the GitHub issues tracker. Only post an issue here if you think you discovered a bug or have a feature request.

---

Please read the contributing guidelines before you start working on Dropzone!

>> Download <<

This is no longer the official repository for Dropzone. I have switched to gitlab.com as the primary location to continue development.

There are multiple reasons why I am switching from GitHub to GitLab, but a few of the reasons are the issue tracker that GitHub is providing, drowning me in issues that I am unable to categorise or prioritize properly, the lack of proper continuous integration, and build files. I don't want the compiled .js files in my repository, and people regularly commit changes to the compiled files and create pull requests with them.

I will write a blog post soon, that goes into detail about why I am doing the switch.

This repository will still remain, and always host the most up to date versions of dropzone, but only the distribution files!

MIT License

Changelog

5.7.1

• Fix issue with IE (thanks to @Bjego)