Jquery Plugin For File Upload

If you can’t install the jquery UI plugin, you can use jQuery File Upload plugin. The file upload feature is a very important part of any site or web application and it has become an essential functionality that users now demand.

Building a file upload form in jquery can be tricky if you don’t know what your looking for. File uploaders need to handle permissions, memory leaks and other potential problems that might occur when uploading large files.

I’ve spent a some time searching the web for the best wordpress plugin for file upload. I was looking for one that worked with thumbnail creation, insertion into posts and a simple interface. Most of all though I needed something that could be customized to suit my needs. Hopefully you’ll find this plugin useful in your upcoming projects and it will help you save some time.

Jquery Plugin For File Upload

1. FineUploader

FineUploader is a flexible, actively maintained uploader, written in pure JavaScript, but also available as jQuery plugin. Compared to all other plugins below, it has the most interesting — and unique — features implemented: pause/resume uploads, concurrent chunking, <canvas> upload, retry, folder uploads, edit filenames, and many more.

FineUploader Screenshot

Website
Source code

2. Dropzone.js

Dropzone.js is a file uploader available in pure JavaScript and jQuery, with options for almost everything, like image previews (thumbnails), specification of maximum file size, renaming files on upload, parallel uploads or resizing of images on upload. The documentation is clean and easy to read, though there are about 500 open issues (bugs and feature requests) — many of which have been open for years — so be aware that you might be on your own if you encounter problems.

Dropzone.js Screenshot

Website
Source code
Further article about Dropzone.js: How to Build a File Upload Form with Express and Dropzone.js

Find Your Dream Job

3. jQuery File Upload

Like Dropzone.js (#1), jQuery File Upload offers you a very similar bunch of options to fit your needs (albeit with a different UI), as well as prefabricated integrations for jQuery UI and AngularJS. It is very popular, so you’ll find many answers on StackOverflow, but the project has disabled issues on GitHub and the documentation might be difficult to read.

jQuery File Upload

Website
Source code

4. Plupload

Plupload is a great choice if you want to start with the built-in UI out of the box. It offers you fewer options for customization, but several dozen themes with language packages and Flash or Silverlight fallbacks.

Plupload

Website
Source code

$3/month Sale

5. Formstone Upload

Formstone is a collection of useful web components, including Upload, a standalone jQuery file upload plugin. As it offers only the basic options for customization and the UI is very simple, getting started should be very easy.

Formstone Upload

Website
Source code

6. jQuery.filer

This plugin focuses on a great built-in UI, and is based on modular architecture that allows you to easily enable or disable components and to specify custom themes. As an extra, it offers you a PHP class to handle upload requests.

jQuery.filer

Website
Source code

Find Your Dream Job

7. Bootstrap File Input

Bootstrap File Input is a Bootstrap 3.x file upload plugin with jQuery API that ships with everything you need for customization. It not only allows you to preview uploaded images, but also text, HTML, video, audio, Flash and object files.

bootstrap-fileinput

Website
Source code

8. jQuery Upload File

jQuery Upload File is simple upload plugin with all the basic options, as well as image previews, localization and the facility to build your own UI with custom templates. As it has an example for every feature, implementation should go quickly.

jQuery Upload File

Website
Source code

$3/month Sale

9. jQuery HTML5 Uploader

This uploader allows you to drag and drop files into an element (e.g. a <div>) and then uploads the file (or multiple files) to a specified URL. No more and no less.

jQuery HTML5 Uploader

Website
Source code

10. Uploadify

Uploadify is a Flash-based jQuery upload plugin that adds a select button to your website. As the customization is limited, the support forum is closed and Flash shouldn’t be used generally, it isn’t recommended to use it anymore. There’s another plugin, called UploadiFive, that is HTML5-based and available on the same website, but the commercial license costs $100 at the time of writing.

Uploadify

Website
Source code

Find Your Dream Job

Tip

Sometimes you — or your customers — might have special requirements, and you’ll need to create the UI without jQuery, or adhere to a particular style guide. In this case, you might be interested in the following two projects that allow you to realize file uploads with completely self-made user interfaces:

  • Resumable.js
  • FileAPI

Conclusion

These are the best known plugins on the market. If you’ve had any experience with them — good or bad — or have another noteworthy file upload plugin, please let us know in the comments.

Leave a Comment