Small Drag & Drop To Upload Plugin - jQuery simple-upload

simple-upload is a lightweight, user-friendly, AJAX-enabled file uploader plugin that supports drag'n'drop, file validation, upload progress bar, AJAX form submit, etc.

The plugin provides a basic file upload experience on your web application while leaving the styling up to you.

How to use it:

1. Create a normal file input on the webpage.

<input type="file" name="file" id="basic">

2. The plugin also supports multiple file upload.

<input type="file" name="file" multiple="true" id="basic">

3. Create a drop zone where the user can add files to the upload queue via drag and drop.

<div id="basic_drop_zone" class="dropZone">
  <div>Drop files here</div>
</div>

4. Create a 'progress' container to hold the progress bar while uploading files to the server.

<div id="basic_progress"></div>

5. Create a 'message' container to hold the feedback messages.

<div id="basic_message"></div>

6. Initialize the plugin and done.

$('#basic').simpleUpload({
  dropZone: '#basic_drop_zone',
  progress: '#basic_progress'
})

7. Determine how you'd like to upload the file(s).

$('#basic').simpleUpload({

  // url to send the data
  url: '',

  // submit method
  method: 'post',

  // set object
  params: {
    'KEY': 'VALUE'
  },
  // or set callback
  params: function() {
    return { 'KEY': 'VALUE' };
  },

  ajax: {
    headers: {
      'HEADER_KEY': 'HEADER_VALUE'
    },
    dataType: 'application/json',
    timeout: 0,
    async: true
  }
  
})

8. Validate the file(s) to upload on the client-side. All possible validators:

• The max number of files.
• File size.
• Extension name.
• Mime type.
• Custom validation rule.

function validate(files) {
  var passed = []
  for (var i=0; i<files.length; i++) {
    if (files[i].name == 'test.txt') {
      alert("can't upload test.txt");
    } else {
      passed.push(files[i]);
    }
  }
  return passed;
}

$('#basic').simpleUpload({
  maxFileNum: 4,
  maxFileSize: 100,
  allowedFileName: /\.txt$/,
  allowedMimeType: /^text\//,
  validator: validate
})

9. Available functions to handle the upload events.

$('#basic').simpleUpload().on('upload:before', function(e, files) {
  console.log('before');
  console.log(files);
}).on('upload:after', function(e, files) {
  console.log('after');
  console.log(files);
}).on('upload:start', function(e, file, i) {
  console.log('start ' + i);
  console.log(file);
}).on('upload:progress', function(e, file, i, loaded, total) {
  console.log('progress ' + i + ' ' + loaded + '/' + total);
}).on('upload:end', function(e, file, i) {
  console.log('end ' + i);
  console.log(file);
}).on('upload:done', function(e, file, i) {
  console.log('done ' + i);
  console.log(file);
  $('#basic_message').prepend('<p>done: ' + file.name + '</p>');
}).on('upload:fail', function(e, file, i) {
  console.log('fail ' + i);
  console.log(file);
  $('#basic_message').prepend('<p>fail: ' + file.name + '</p>');
});

Changelog:

v0.4.0 (2020-07-12)

• Add ajax option

v0.3.0 (2019-10-21)

• Bundle css with js.

---

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