JavaScript file upload library – filepond JS, with adapters for Vue and React JS!
File upload for web app or mobile website? It’s easy! Try this JavaScript file upload library, called filepond JS.
Use filepond and make JavaScript file upload implementation easy!
The filepond brings a solution for JS file upload, with very nice UI and adapters for Vue, React, Angular and jQuery! Just awesome!
Main features
– Drop files, select on filesystem, copy and paste files, or add files using the API
– Accepts directories, files, blobs, local URLs, remote URLs and Data URIs
– Async uploading with AJAX, or encode files as base64 data and send along form post
– Image optimization, automatic image resizing, cropping, and fixes EXIF orientation
– Accessible & Responsive, automatically scales to available space, is functional on both mobile and desktop devices
– Multiple Input Formats, Multiple File Sources, sync or Sync Uploading…
And more? Sure thing! We can also:
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, Crystal clear documentation, 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, huh!

TIP
Need Image Editing? Try Doka.js (commercial solution).
Setup
npm install filepond
Use it
// Import import * as FilePond from 'filepond'; // Create a multi file upload component const pond = FilePond.create({ multiple: true, name: 'filepond' }); // Add it to the DOM document.body.appendChild(pond.element);
<!-- We'll transform this input into a pond --> <input type="file" class="filepond">
Adapters
That’s not all. We can easy integrate the solution with top frameworks.
JavaScript file upload for Vue.js:
https://github.com/pqina/vue-filepond
Solution for jQuery:
https://github.com/pqina/jquery-filepond
For Angular JS:
https://github.com/pqina/ngx-filepond
And JavaScript file upload in React JS
https://github.com/pqina/react-filepond
License: MIT
Homepage & docs
GitHub
https://github.com/pqina/filepond
You may also like
Dropzone.js – drag and drop JavaScript file uploader
Build your online Photoshop with jQuery dRawr
Generating PDF in JavaScript – solutions
Responsive ReactJS carousel gallery: react-image-gallery
Vue.js scroll to element solutions
Detect mobile in JavaScript – Vue.js example
A small set of good AngularJS tutorials
Read files in JavaScript and HTML5
AngularJS Tutorial – a simple UI to control elements
Enjoy!