CollectiveJavaScriptOpen Source

7 JavaScript File Upload Libraries

featured image

Whether you are building a web-application or a social-media website, you are sure to add file-upload feature to your website. While you can always use the native <input type='file'> tags, it won’t hurt much to improve the UI with some JavaScript magic. In this post, I am going to list a few of the many open source file-upload libraries that are (currently) being actively developed and easy to integrate.

1. Filepond

FilePond is an open-source JavaScript library that lets you quickly add file-upload feature to your existing website. It has a neat interface that clearly shows percentage of file upload. It also optimizes image uploads for faster uploads. It supports multiple file uploads.

2. Uppy

Uppy is another feature-packed file-upload library. It supports file upload from third-party websites including Google Drive, Instagram and Dropbox. You can upload multiple files at once. Integrating Uppy to your website is dead-simple: just include the minified JavaScript file and attach Uppy to a specific element. It is currently being actively developed by 113 contributors on Github. So you can expect pretty helpful community of users.

3. Dropzone.js

Dropzone.js is a no-fuss dependency-free JS library that allows multiple file-uploads and image previews. If you want a simple minimalist lightweight file-uploader, this might be your choice.

4. jQuery File Upload

jQuery File Upload is a simple file uploader that can be heavily skinned to fit your UI. It supports drag-n-drop and multiple file uploads. You can configure this to restrict file size and file-types. Apart from the usual jQuery version, it also comes in AngularJS flavor.

5. HTML5 File Uploader

Another feature-packed file uploader by InnoStudio. It supports multiple file uploads, file-type restriction, theming, preloading uploaded files and many other helpful features. You can also use this with Amazon S3. It also comes packed with an image-editor.

6. Resumable.js

Resumable.js is best suited for large file uploads (although it works as well as with smaller files). It is built on top of HTML5 File API. It uploads larger files by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes. It does not have any external dependencies. The uploader is heavily de-coupled: you can assign specific element as browse button and as drag-n-drop element.

7. Meteor Files

Meteor files is an award winning, extremely fast and robust package for file uploading, managing and streaming (Audio & Video & Images), with support of server’s file system (FS) or third party storage, like: AWS, DropBox, Google Storage, Google Drive, GridFS or any other with API.

Conclusion

All the listed JavaScript libraries work independent of server-side language. No matter whether you choose PHP or NodeJS, these libraries will work seamlessly. Also, these libraries have first-class support for theming so that you can integrate with the look and feel of your existing application.