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.
Top comments (2)
Thanks for sharing.
Tks, i love this plugins =)