Popularity

9.0

Growing

Activity

0.0

Declining

Stars 17,829

Watchers 400

Forks 3,290

Last Commit 5 months ago

Description

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.

Code Quality Rank: L4

Monthly Downloads: 0

Programming language: JavaScript

License: GNU General Public License v3.0 or later

Tags: Form Widgets File Uploader Upload File Upload Drag And Drop Dragndrop

Latest version: v6.0.0-beta.2

dropzone alternatives and similar libraries

Based on the "File Uploader" category.
Alternatively, view dropzone alternatives based on common mentions on social networks and blogs.

jQuery-File-Upload

9.7 5.1 L4 dropzone VS jQuery-File-Upload

File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
Uppy

9.3 9.6 dropzone VS Uppy

The next open source file uploader for web browsers :dog:

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App

With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

Promo surveyjs.io

filepond

8.4 6.5 dropzone VS filepond

🌊 A flexible and fun JavaScript file upload library
fine-uploader

8.1 0.0 L4 dropzone VS fine-uploader

Multiple file upload plugin with progress-bar, drag-and-drop, direct-to-S3 uploading.
plupload

7.1 0.0 L3 dropzone VS plupload

Plupload is JavaScript API for building file uploaders. It supports multiple file selection, file filtering, chunked upload, client side image downsizing and when necessary can fallback to alternative runtimes, like Flash and Silverlight.
FileAPI

5.8 0.0 L1 dropzone VS FileAPI

FileAPI — a set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF.
flow.js

5.2 0.0 L3 dropzone VS flow.js

A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.
HTML5 AJAX File Uploader

2.3 0.0 L3 dropzone VS HTML5 AJAX File Uploader

JavaScript library that manages file uploads using html5 drag and drop and file API's.

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.

Do you think we are missing an alternative of dropzone or a related project?

Add another 'File Uploader' Library

Popular Comparisons

README

Dropzone is a JavaScript library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone will display file previews and upload progress, and handle the upload for you via XHR.

It's fully configurable, can be styled according to your needs and is trusted by thousands.

Quickstart

Install:

$ npm install --save dropzone
# or with yarn:
$ yarn add dropzone

Use as ES6 module (recommended):

import { Dropzone } from "dropzone";
const dropzone = new Dropzone("div#myId", { url: "/file/post" });

or use as CommonJS module:

const { Dropzone } = require("dropzone");
const dropzone = new Dropzone("div#myId", { url: "/file/post" });

👉 Checkout our example implementations for different bundlers

Not using a package manager or bundler?

Use the standalone files like this:

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css"
  type="text/css"
/>

<div class="my-dropzone"></div>

<script>
  // Dropzone has been added as a global variable.
  const dropzone = new Dropzone("div.my-dropzone", { url: "/file/post" });
</script>

📚 Full documentation
⚙️ src/options.js for all available options

⚠️ NOTE: We are currently moving away from IE support to make the library more lightweight. If you don't care about IE but about size, you can already opt into 6.0.0-beta.1. Please make sure to pin the specific version since parts of the API might change slightly. You can always read about the changes in the [CHANGELOG](./CHANGELOG.md) file.

Community

If you need support please use the discussions section or stackoverflow with the dropzone.js tag and not the GitHub issues tracker. Only post an issue here if you think you discovered a bug.

If you have a feature request or want to discuss something, please use the discussions as well.

⚠️ Please read the [contributing guidelines](CONTRIBUTING.md) before you start working on Dropzone!

Main features ✅

Beautiful by default
Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
High-DPI screen support
Multiple files and synchronous uploads
Progress updates
Support for large files
- Chunked uploads (upload large files in smaller chunks)
Support for Amazon S3 Multipart upload
Complete theming. The look and feel of Dropzone is just the default theme. You can define everything yourself by overwriting the default event listeners.
Browser image resizing (resize the images before you upload them to your server)
Well tested