Drag n drop multiple AJAX images upload with progress bar

Drag n drop multiple AJAX images upload with progress bar

AJAX is an important part in 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 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 regular one.
  • No external upload handling script is used.
  • Using 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 desired location in your page.

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 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 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 necessary jQuery library in our project.

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

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

This PHP script is light and can explain us the processing very well. It’s 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.

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

  • thanks its great

  • mood

    An error has occured while uploading photo

    why this error is apear from ajax_upload file

    • Amit Sonkhiya

      Hi,
      you might have not uploads directory exist or not writable. Please check and let me know