@uppy/drag-drop

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}`);
});