Drag n Drop Multiple AJAX Images Upload with Progress Bar

AJAX is an important part of web development. This blog post covers steps to handle AJAX images upload with progress bar in Bootstrap with drag n drop feature. Some cool features in these steps are:

  • AJAX uploading images
  • Nicely displays any error that occurred in Bootstrap style alert.
  • Shows progress bar while uploading.
  • Image preview after uploading.
  • Automatic image upload on drag and drop or on image selection through file browser button.
  • Bootstrap style file input button instead of a regular one.
  • No external upload handling script is used.
  • Using the famous Twitter Bootstrap front-end framework.
  • Multiple images upload.
  • Easily extensible.
  • Regular File browser for outdated browsers.
  • Extreme lightweight.

Drag n drop multiple AJAX images upload with progress bar in Bootstrap

Starting with a simple image drop zone, place the following markup at the desired location on your page.

Drag n drop multiple AJAX images upload with progress bar

So we have created an image area to drop and a progress bar below it. There is an image preview area as well to show the preview of images after uploading. Now let’s create some CSS rules to represent this drag n drop area in bootstrap style as shown in the featured image.

Now it’s time to apply some jQuery to actually handle AJAX image uploading. We have added the jQuery code in ajax-upload.js and you can download the zip at the end of this post. The code is placed here as well and we need to add the code or call the ajax-upload.js file after adding the necessary jQuery library in our project.

Here the code is self-explanatory and you can append more form data to pass to the server or can alter in your own way to best suit with your requirement.

The last part remaining is to accept the request at the server, validate the file, and move the uploaded file to a permanent location in the PHP script (upload.php). To simplify the steps, the minimum PHP code is as follow:

This PHP script is light and can explain the processing very well. It’s the same as a regular file upload. However, in a production environment, you must include more validation and code including file mime and size checking and renaming files to unique names before uploading and furthermore might need to create and return thumbnails of uploaded images.

Display Bootstrap Progress Bar in the Edge/IE Browsers

To make the Bootstrap progress bar in the Edge/IE browser. Add the following meta tag in the head section of your page. The first line is for the Edge and the rest all for Internet Explorer 8 and below.

It’s all we require to handle drag n drop multiple AJAX images upload with progress bar in Bootstrap. Download the demo zip from here.

You Might Interested In

12 COMMENTS

  1. Matjaz says:

    Why you don’t install Edge and fix the script? It would make lots of sense to offer your script to as good as it can possibly be. Thank you!

    Reply
      1. Matjaz says:

        I was referring to your answer from 1 year ago (Unfortunately, I don’t have Edge browser to test in my desktop). Before I start implementing this, it would be nice if it is fixed, otherwise I cannot use it. I would appreciate if you install Edge and see why it is not working (as you are the author).

        Reply
          1. Amit Sonkhiya says:

            Hi @Matjaz

            Yes! I hadn’t Edge at that time, now I have. By tomorrow, I will test the same and let you know.

            In the meantime, you can also inspect the request in the developer console and the Network tab there.

    1. Amit Sonkhiya says:

      Hi @disqus_N4JQkb2PIY:disqus

      Unfortunately, I don’t have Edge browser to test in my desktop. You could test the same using Edge Developer tool and let me know any error it reports.

      Reply

Leave a Reply