Creating Multi-files Uploader with blueimp jQuery Plugin & PHP

Written by Saran on June 24, 2015, Updated November 13, 2018

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.

Browser Support

6+

v31+

v30+

v4+

v11+

Mark Up

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.

Include jQuery Scripts

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.

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.

Adding Files to Queue

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.

Upload Progress

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.

PHP Upload Handler

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.

Conclusion

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!

About Sanwebe.com

Sanwebe.com was founded in 2011 by Saran Chamling. A blog truely inspired by the ever changing web development world. It is a small effort to provide useful tips, tutorials and related resources to web developers.