Drag'n'drop Multi File Uploader - jQuery Smart Uploader

A smart jQuery file uploader plugin for creating a drag and drop area around a file input that allows you to upload multiple files to the web server.

More features:

• Image preview.
• Allows to convert images to other formats: jpg, png, webp.
• Allows to resize the image to a specific size.
• Progress bar when uploading.
• Allows to specify the maximum size of file.
• AJAX upload enabled.

Basic usage:

1. Create a drag and drop area around your regular file input:

<form enctype="multipart/form-data" action="" method="post">
  <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">
</form>

2. Insert jQuery library and the jQuery smart uploader plugin into the webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.smartuploader.js"></script>

3. Initialize the smart uploader and done.

$("#file_input").withDropZone("#drop_zone", {
  action: {
    name: "image",
    params: {
      preview: true,
    }
  },
});

4. The example CSS to style the smart uploader.

#file_input { display: none; }

.drop-zone {
  cursor: pointer;
  user-select: none;
  color: #555;
  font-size: 18px;
  width: 400px;
  padding: 50px 0;
  margin: 50px auto;
  border: 2px dashed #0087F7;
  border-radius: 5px;
  background: white;
}

.drop-zone.hover {
  background: #ddd;
  border-color: #aaa;
}

.drop-zone.error {
  background: #faa;
  border-color: #f00;
}

.drop-zone.drop {
  background: #afa;
  border-color: #00a1ff;
}

.drop-zone.drop > .title { display: none; }

.preview-container canvas { width: 150px; }

.file-uploader-progress-bar { margin: 0 20px; }

.file-uploader-progress-bar > * {
  background-color: #71a5f3;
  width: 0;
  height: 5px;
  border-radius: 5px;
}

.wrapper.uploading .progress { background-color: #8c8c8c; }

5. Customize the smart uploader with the following options.

$("#file_input").withDropZone("#drop_zone", {
  url: null,
  action: null,
  multiUploading: true,
  ifWrongFile: "show",
  maxFileSize: Number.POSITIVE_INFINITY,
  autoUpload: false,
  fileNameMatcher: /.*/,
  fileMimeTypeMatcher: /.*/,
  wrapperForInvalidFile: function(fileIndex) {
    return "<p>File: \"" + this.files[fileIndex].name + "\" doesn't support</p>'";
  },
  validateEach: function(fileIndex) {
    return true;
  },
  validateAll: function(files) {
    return files;
  },
  uploadBegin: function(fileIndex, blob) {},
  uploadEnd: function(fileIndex, blob) {},
  done: function() {},
  ajaxSettings: function(settings, fileIndex, blob) {}
});

Changelog:

2018-11-26

• add autoUpload; fixed some bugs

2017-08-28

• add autoUpload; fixed some bugs

---

This awesome jQuery plugin is developed by sagidM. For more Advanced Usages, please check the demo page or visit the official website.