Blueimp File Upload is a popular free jQuery File upload plugin which can handle multiple file uploads, it comes with many attractive features like drag & drop support, progress bars, client side preview of pictures, audios and videos. It works with any server-side platform such as Google App Engine, PHP, Python, Ruby on Rails, Java.
Today I am going to use this wonderful jQuery plugin to create a custom file uploader interface (without Bootstrap or jQuery UI layout). With little bit of CSS and jQuery our final multiple file uploader should look as picture below, we can then drag and drop files on it, preview image or play audio or video files before even uploading them to the server.
In the HTML code, we have outer DIV element which holds everything together, inside we have drop zone, file input, button and files container elements. We will use CSS to style these elements, since most of these elements will be controlled by jQuery script, we do not need to add anything else, unless you have other ideas on your mind.
Once we have our HTML elements in position, we need to include jQuery library along with blueimp jQuery scripts. Plugin requires jQuery UI to function, but fortunately blueimp comes with smaller, lightweight version of original jQuery UI.
We now have included the required scripts for our file upload, it is time to initialize file upload plugin with various Options available, which can be changed according to one’s needs.
As you can see it is accepting number of file formats, and maximum file size allowed is 1 MB, these options only work if we have included “jquery.fileupload-validate.js” script, and features like image preview requires “jquery.fileupload-image.js”, so basically even if you don’t include some of these dependency scripts, file upload will work perfectly, but some of “those” functionality will be absent.
To add files in the file container queue for upload, we use add callback method. Since autoUpload is set false in initialization option above, files will not be uploaded automatically, we will be creating upload buttons instead, which will trigger file upload.
Remember the progress bar we added and cloned in add method above, we can use it to display progress upload of each file using progress method as shown below. To track progress of all (global) upload events, we can use progressall method.
On successful ajax request, server returns JSON response, to capture these data, we use done callback, which is the equivalent to the success callback provided by jQuery ajax().
Blueimp File uploader comes with file upload handler for different server platform. If you are using different platform you can find these handler at their Github Repo. For this tutorial we will be using PHP file upload handler (UploadHandler.php).
All we need to do is include the file in our upload PHP script and it takes care of everything. We just need to provide parameters as per our requirement.
Creating custom uploader with Blueimp file upload plugin is really effortless, because you spend less time correcting errors and more time designing user interface, what else can one ask for. You can find everything included in downloadble file below, blueimp plugin is also included in the package, just don’t forget to checkout demo and give your valuable feedback, good luck!