dropzone README

The project's README from github.com/enyo/dropzone. As one markdown file: README.md.

Dropzone.js

CI

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.

Dropzone Screenshot

Quickstart

Install:

$ npm install dropzone
# or with pnpm:
$ pnpm 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@6/dist/dropzone-min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@6/dist/dropzone.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>

⚠️ NOTE: Dropzone 6 does not support Internet Explorer. If you still need it, use 5.9.3. See the CHANGELOG for everything that changed in 6.0.0.

Repository layout

This is a monorepo. It holds the library, the documentation and the website:
packages/dropzone the library published to npm as dropzone
apps/docs the documentation, built with Docusaurus
apps/website www.dropzone.dev, built with SvelteKit 
pnpm install

pnpm build          # the library and the docs
pnpm test           # the library's unit tests
pnpm test:e2e       # the library's browser tests
pnpm dev:docs       # the documentation, locally
pnpm dev:website    # the website, locally

Building the deployable site

The website and the documentation are published together as one GitHub Pages site: the website at the root, the documentation under /docs. One command produces exactly what gets deployed, in _site/:

pnpm build:site

CI runs the same script, so what you get locally is what ships. It builds each half with its own toolchain and combines them, which means there is no manual copying step to remember or get wrong.

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 before you start working on Dropzone!

Main features ✅

MIT License

See the LICENSE file

dropzone (enyo/dropzone)

Searching Database…

18.4K ·GitHub
Dropzone
What is this?Dropzone is a JavaScript library that turns any HTML element into a dropzone: users drag files onto it, and it shows previews and progress bars while handling the upload via XHR.
So it's not an app I install — I wire it into my own page?Exactly — it's a library you add to your own web page. On GitHub it lives as a monorepo: the npm package 'dropzone', the documentation (Docusaurus) and the www.dropzone.dev website (SvelteKit).
How do I add it to a project?Install it from npm and import as an ES6 module (recommended) or a CommonJS module; without a package manager or bundler you can use the standalone files. The repo links example implementations for different bundlers.
Does it need anything else to run, like a backend or a framework?Nothing to run it — it's plain client-side JavaScript. Building the repo itself needs Node >= 20.19.0 and pnpm, but that's only for development.
Any browser gotchas I should know about?Dropzone 6 does not support Internet Explorer — if you still need IE, use version 5.9.3.
Can I use it in commercial projects?Yes — Dropzone is MIT licensed, so you can use and modify it freely, including commercially.
What does it handle for me once a file is dropped?Image thumbnail previews (with High-DPI screen support), multiple files and synchronous uploads, and progress updates. It can even resize images in the browser before they are uploaded to your server.
Can it handle really large files?Yes — it supports large files via chunked uploads (sending them in smaller chunks) and Amazon S3 Multipart upload.
Can I restyle the dropzone to match my site?Fully. The shipped look is just the default theme, and you can define everything yourself by overwriting the default event listeners.
What are similar projects?Sortable, trix, react-dropzone, pragmatic-drag-and-drop, pell, tui.calendar, draggable, PhotoSwipe
Which topics is it in?amazon-s3, file-upload, website, es6, drag-and-drop, image, javascript-library, ui-components, browser, html, ui, free
Creator
enyo
Size
11.5 MB
Stars
18.4K
Updated
CommitSep 27Release[email protected]Sep 27
Age
14y
Commits · 90 Days