1. dropzone
Handles drag and drop of files for you.
dropzone
Package: dropzone
Created by: dropzone
Last modified: Thu, 16 Jun 2022 00:33:57 GMT
Version: 6.0.0-beta.2
License: MIT
Downloads: 1,942,957
Repository: https://github.com/dropzone/dropzone

Install

npm install dropzone
yarn add dropzone
Dropzone.js

Test and Release

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


⚠️ 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 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 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

MIT License

See LICENSE file

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code