DEV Community

Cover image for my favorite upload plugins
Leandro RR
Leandro RR

Posted on • Updated on

my favorite upload plugins

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/

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

or all at once:

$ npm install uppy
Enter fullscreen mode Exit fullscreen mode

then import it in your project:

import Uppy, { XHRUpload, DragDrop } from 'uppy'
Enter fullscreen mode Exit fullscreen mode

Filepond

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

Alt Text

Alt Text

Alt Text

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.

Top comments (2)

Collapse
 
ayaanraj profile image
ayaanraj

Thanks for sharing.

Collapse
 
zulian profile image
Luiz Zulian

Tks, i love this plugins =)