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).

https://pqina.nl/doka/

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

https://pqina.nl/filepond/

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

Upload files in JavaScript

Read files in JavaScript and HTML5

AngularJS Tutorial – a simple UI to control elements

Enjoy!