@uppy/drag-drop

What is @uppy/drag-drop?

@uppy/drag-drop is a module of the Uppy file uploader library that provides a drag-and-drop interface for file uploads. It allows users to drag files from their file system and drop them into a designated area on a web page to initiate the upload process.

What are @uppy/drag-drop's main functionalities?

Basic Drag-and-Drop File Upload

This code initializes Uppy and uses the DragDrop plugin to create a drag-and-drop area for file uploads. The 'file-added' event logs the added file to the console.

const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');

const uppy = Uppy();

uppy.use(DragDrop, {
  target: '#drag-drop-area',
  inline: true,
  width: '100%',
  height: '100%',
  note: 'Drag & drop your files here'
});

uppy.on('file-added', (file) => {
  console.log('Added file', file);
});

Customizing Drag-and-Drop Area

This code demonstrates how to customize the drag-and-drop area with a custom note and localized strings for the interface.

const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');

const uppy = Uppy();

uppy.use(DragDrop, {
  target: '#drag-drop-area',
  inline: true,
  width: '100%',
  height: '100%',
  note: 'Drag & drop your files here',
  locale: {
    strings: {
      dropHereOr: 'Drop here or %{browse}',
      browse: 'browse'
    }
  }
});

Handling Upload Progress

This code shows how to handle upload progress events. It uses the XHRUpload plugin to upload files to a specified endpoint and logs the upload progress to the console.

const Uppy = require('@uppy/core');
const DragDrop = require('@uppy/drag-drop');
const XHRUpload = require('@uppy/xhr-upload');

const uppy = Uppy();

uppy.use(DragDrop, {
  target: '#drag-drop-area',
  inline: true
});

uppy.use(XHRUpload, {
  endpoint: 'https://your-upload-endpoint.com/upload'
});

uppy.on('upload-progress', (file, progress) => {
  console.log(`File: ${file.name}, Progress: ${progress.bytesUploaded}/${progress.bytesTotal}`);
});

Other packages similar to @uppy/drag-drop

react-dropzone

react-dropzone is a popular React component for handling file drag-and-drop uploads. It provides a simple and flexible API for integrating drag-and-drop functionality into React applications. Compared to @uppy/drag-drop, react-dropzone is more focused on React integration and does not include the broader file management and upload capabilities of Uppy.

dropzone

dropzone is a standalone JavaScript library that provides drag-and-drop file uploads with image previews. It is highly customizable and easy to integrate into any web application. Unlike @uppy/drag-drop, dropzone is not part of a larger file management library and focuses solely on the drag-and-drop upload functionality.

fine-uploader

fine-uploader is a comprehensive JavaScript library for file uploads that includes drag-and-drop support, image previews, and retry capabilities. It offers a wide range of features for handling file uploads but is more complex to set up compared to @uppy/drag-drop, which benefits from Uppy’s modular and plugin-based architecture.

README

@uppy/drag-drop

Droppable zone UI for Uppy. Drag and drop files into it to upload.

Read the docs | Try it

Uppy is being developed by the folks at Transloadit, a versatile file encoding service.

Example

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'

const uppy = new Uppy()
uppy.use(DragDrop, {
  target: '#upload',
})

Installation

$ npm install @uppy/drag-drop

Alternatively, you can also use this plugin in a pre-built bundle from Transloadit’s CDN: Edgly. In that case Uppy will attach itself to the global window.Uppy object. See the main Uppy documentation for instructions.

Documentation

Documentation for this plugin can be found on the Uppy website.

License

The MIT License.

Changelog

3.0.1

Released: 2022-08-30

| Package | Version | Package | Version | | ------------------------- | ------- | ------------------------- | ------- | | @uppy/angular | 0.4.1 | @uppy/store-default | 3.0.1 | | @uppy/audio | 1.0.1 | @uppy/store-redux | 3.0.1 | | @uppy/aws-s3 | 3.0.1 | @uppy/svelte | 3.0.0 | | @uppy/aws-s3-multipart | 3.0.1 | @uppy/thumbnail-generator | 3.0.1 | | @uppy/companion | 4.0.1 | @uppy/transloadit | 3.0.1 | | @uppy/companion-client | 3.0.1 | @uppy/tus | 3.0.1 | | @uppy/core | 3.0.1 | @uppy/utils | 5.0.1 | | @uppy/dashboard | 3.0.1 | @uppy/webcam | 3.1.0 | | @uppy/react | 3.0.1 | @uppy/xhr-upload | 3.0.1 | | @uppy/remote-sources | 1.0.1 | uppy | 3.0.1 |

• @uppy/dashboard,@uppy/webcam: add nativeCameraFacingMode to Webcam and Dashboard (Artur Paikin / #4047)
• meta: upgrade to Jest 29 (Antoine du Hamel / #4049)
• @uppy/svelte: update peer dependencies (Antoine du Hamel / #4065)
• @uppy/react: useUppy: fix unmount on NextJS dev mode (Matt Jesuele / #4062)
• @uppy/vue: fix missing component in docs (Antoine du Hamel / #4063)
• @uppy/angular: fix compiler warning (Antoine du Hamel / #4064)
• meta: improve CI npm install time (Antoine du Hamel / #4058)
• meta: example: fix Angular example package name (Antoine du Hamel / #4060)
• meta: upgrade to TypeScript 4.8 (Antoine du Hamel / #4048)
• @uppy/core,@uppy/dashboard,@uppy/thumbnail-generator: update definition type files for TS 4.8 compatibility (Antoine du Hamel / #4055)
• @uppy/transloadit: improve deprecation notice (Antoine du Hamel / #4056)
• @uppy/thumbnail-generator: fix exifr import (Antoine du Hamel / #4054)
• @uppy/utils: fix relativePath when drag&dropping a folder (Antoine du Hamel / #4043)
• @uppy/companion: Fix Companion license (Merlijn Vos / #4044)
• e2e: add tests for AWS (Antoine du Hamel / #3665)
• meta: Only publish Companion to Dockerhub on release (Merlijn Vos / #4037)
• meta: fix linter warnings (Antoine du Hamel / #4039)
• @uppy/utils: Post-release website fixes (Merlijn Vos / #4038)
• @uppy/angular: fix peer dependencies (Antoine du Hamel / #4035)
• meta: uppy.io homepage: Add Tus (Artur Paikin)
• meta: Fix uppy.io homepage example (Artur Paikin)