my favorite upload plugins
Tags: javascript, react, vue, css
Published: 2020-09-03 03:27:20

---
title: my favorite upload plugins
published: true
description: wanna know about a good upload plugin? this is your post!
tags: #javascript #react #vue #css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8pcyv8jy2skertna90rt.png
---
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](https://dev-to-uploads.s3.amazonaws.com/i/dkiym4rgwch1uw50tj1a.png)

here's some of your features:
* open source
* lightweight, modular, plugin-based architecture, easy on dependencies
* resumable file uploads via the open [tus](https://tus.io/) 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](https://uppy.io/docs/golden-retriever/)
* I18n
* Built with accessibility in mind
* Free forever


also, you can use it with [react, vue or simple website!](https://uppy.io/docs/) and obviously use module bundlers like: webpack or browserify.

you can install it by separate modules:

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

or all at once:

```ssh
$ npm install uppy
```
then import it in your project:

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rqcqg7jhu9h9q5uw80eb.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w0rhvgggxertqyoyhnq2.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/euo71gpaulj4mth24jcy.gif)

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](https://pqina.nl/filepond/docs/).

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