loading...
Cover image for my favorite upload plugins

my favorite upload plugins

leandroruel profile image Leandro RR Updated on ・2 min read

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

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/

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.

Posted on by:

leandroruel profile

Leandro RR

@leandroruel

Brazilian dev always looking for learn new things and love for javascript and php

Discussion

pic
Editor guide
 

Thanks for sharing.

 

Tks, i love this plugins =)