Drag and Drop Image Upload jQuery with Preview

jQuery samrtUploader plugin allows you to create a drag and drop image upload form with a preview feature. It supports multiple files, progress bar and client-side image resize convert and resizing. It does not require any additional browser plugin (such as flash player) to resize/convert and preview before uploading.

The smart uploader plugin is based on standard HTML5 and JavaScript to upload the images. So, it supports all modern browsers and devices to functionalize the drag & drop and images preview. Besides this, the plugin also supports multiple file formats for images including JPG, JPEG, PNG, and GIF, etc.

Basically, the plugin comes with two parts, an upload form, and an image converter/resizer. You can control these features through its configuration options. After integrated with this plugin, users can easily drag image files from there desktop file manager to the browser window.

NPM Installation

You can use the following NPM commands to install the jQuery smartUploader plugin.

$ npm install --global coffeescript
$ coffee -wc jquery.smartuploader.coffee #watch and compile
$ coffee -c jquery.smartuploader.coffee  #just compile

Create Drag and Drop Image Upload Form with Preview

First of all, load the jQuery and plugin assets into your project to create drag and drop image upload with preview.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Smart Uploader CSS -->
<link rel="stylesheet" href="css/smartuploader.css">
<!-- Smart Uploader JS -->
<script src="js/jquery.smartuploader.min.js"></script>

After that, create an HTML div element with the class name “drop-zone” that will handle dropped images. Similarly, build another div that will contain an image preview. After these elements, create an input with type “file” and upload button. The complete HTML structure for upload form is as follows:

<div id="drop_zone" class="drop-zone">
   <p class="title">Drop file here</p>
   <div class="preview-container"></div>
</div>
<input id="file_input" accept="image/*" type="file" multiple="" name="file">
<button id="upload_images">Upload </button>

Now, define your URL (where you want to upload images) in the plugin configuration and define all other necessary settings. Just add the following JS snippet in the <script> tag in order to activate the image uploader plugin.

var url = "URL HERE";
var fileNamePrefix = "uploads/" + Date.now() + "_";

var result = $("#file_input").withDropZone("#drop_zone", {
  url: url,   // common page for every 
  uploadBegin: function(filename, fileIndex, blob) {
    console.log("begin: " + filename)
  },
  uploadEnd: function(filename, fileIndex, blob) {
    console.log("end: " + filename)
  },
  done: function(filenames){
    console.log("done: " + filenames);
    var result = $("#result_images");
    var html = [`<b>Your image${filenames.length === 1 ? '' : 's:'}</b>`];
    for (var i = 0; i < filenames.length; i++) {
      var href = url + fileNamePrefix + filenames[i];
      html.push(`<a href="${href}">${url + fileNamePrefix}<b>${filenames[i]}</b></a>`)
    }
    result.html(html.join("<br/>"));
  },
  action: function(fileIndex){
    // you can change your file
    // for example:
    var convertTo;
    var extension;
    if (this.files[fileIndex].type === "image/png") {
      convertTo = {
        mimeType: "image/jpeg",
        maxWidth: 150,
        maxHeight: 150,
      };
      extension = ".jpg";
    }
    else {
      convertTo = null;
      extension = null;
    }

    return {
      name: "image",
      rename: function(filenameWithoutExt, ext, fileIndex) {
        return filenameWithoutExt + (extension || ext)
      },
      params: {
        preview: true,
        convertTo: convertTo,
      }
    }
  },
  ifWrongFile: "show",
  wrapperForInvalidFile: function(fileIndex) {
    return `<div style="margin: 20px 0; color: red;">File: "${this.files[fileIndex].name}" doesn't support</div>`
  },

  multiUploading: true,
  formData: function(fileIndex, blob, filename) {
    var formData = new FormData;
    formData.set("key", fileNamePrefix + filename);  // key will be file name in S3
    formData.set("file", blob, filename);
    return formData
  },
  // OR for single upload
  // multiUploading: false,
  // formData: function(blobs, filenames) {
  //   var formData = new FormData;
  //   formData.set("key", fileNamePrefix + filename);
  //   for (var i = 0; i < blobs.length; i++) {
  //     formData.attach("file", blobs[i], filenames[i]);
  //   }
  //   return formData
  // },
  // but Amazon S3 doesn't allow it

  ajaxSettings: function(settings, index, filename, blob){
    // settings.url = "/some_specific_page"
    // settings.data.set("key", "AKIAJ26HYP7ZBX3UNBLA")  // extra parameters
    settings.error = function(e) {
      return alert(`${e.status}: ${e.statusText}`);
    }
  }
});

$("#upload_images").click(result.upload);

That’s all! If you want to customize the working of the plugin, follow the comments instruction described in the above code. You can comment below if you need further help to complete your drag and drop image upload project.