looking for a good drag n drop upload plugin? need a beautiful UI and user friendly? well... after use some of them in my personal projects and jobs i want to share with you my favorite upload plugins.

Uppy

uppy has one good ui and useful resources to make upload very easy.
visit: https://uppy.io/

here's some of your features:

• open source
• lightweight, modular, plugin-based architecture, easy on dependencies
• resumable file uploads via the open tus standard
• Saves battery and data plan by letting users pick files from Webcam, Dropbox, Google Drive and Instagram, while letting servers do the heavy lifting via Companion
• Works great with the file encoding and processing backend from Transloadit, but also works great without
• File recovery (after a browser crash or accidental navigation) via Golden Retriever
• I18n
• Built with accessibility in mind
• Free forever

also, you can use it with react, vue or simple website! and obviously use module bundlers like: webpack or browserify.

you can install it by separate modules:

$ npm install @uppy/core @uppy/xhr-upload @uppy/dashboard

or all at once:

$ npm install uppy

then import it in your project:

import Uppy, { XHRUpload, DragDrop } from 'uppy'

Filepond

the filepond by pqina is very beautiful too! visit: https://pqina.nl/filepond/

all his features:

• Multiple Input Formats: Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
• Multiple File Sources: Drop files, select files from the file system, add files using the API, or copy and paste files.
• Async or Sync Uploading: Send files to the server using XMLHttpRequest or store and submit with form post as base64 using the File Encode plugin.
• Image Optimization: Automatic resizing and cropping of images on the client saves server bandwidth and dramatically increases upload speed.
• Accessible: Tested with AT software like VoiceOver and JAWS. FilePond's user interface is navigable by Keyboard.
• Responsive: Automatically scales to available space. Is functional on both mobile and desktop devices.

and also:

• Drag n' drop to reorder files
• Modify labels and icons
• Multiple or single file mode
• Filter files from dropped folders
• Restore temporary server files
• Catch files dropped on page
• Upload on drop or wait for user action
• Limit drop area height
• Drop to replace current file
• Copy paste files
• Add metadata to files
• Extend FilePond with plugins
• Limit the input file size
• Limit the total size of all files
• Limit the types of files that can be added
• Show preview for image files
• Crop images to a fixed ratio
• Resize images to fit in a bounding box
• Force resize images to a certain size
• Apply image transformations on the client
• Compress JPEG images
• Convert images to JPEG or PNG
• Read image EXIF orientation info
• Base64 encode files

and of course you can use it with react, vue or a simple website.

convinced? try any of them and tell me what you think afterwards.