Flexible jQuery Based AJAX File Uploader - FileUp

FileUp is a simple, flexible, customizable jQuery file upload plugin that makes it easy to upload your local files to servers via AJAX requests, with several advanced features.

Features:

• Drag and drop.
• Upload multiple files at a time.
• File upload progress bar.
• Allows to restrict the file type.
• Tons of options and events.

How to use it:

1. Load the jQuery FileUp plugin's files in the webpage which has jQuery library loaded:

<link href="src/fileup.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="src/fileup.js"></script> 

2. Insert the file input into a file select button as this:

<button type="button" class="fileup-btn">
  Select file
  <input type="file" id="upload-demo">
</button>

3. Create a DIV container to display the upload status.

<div id="upload-demo-queue" class="queue"></div>

4. Initialize the plugin to generate a basic file uploader:

$.fileup({
  url: 'upload.php',
  inputID: 'upload-demo',
  queueID: 'upload-demo-queue',
  onSuccess: function(response, file_number, file) {
    // do something
  },
  onError: function(event, file, file_number) {
    // do something
  }
});

5. Specify that the server accepts only image files in the file upload.

<input type="file" id="upload-demo" multiple accept="image/*">

6. Customize the file uploader by passing the following options to the fileup function:

$.fileup({
  url: window.location.pathname + window.location.search,
  inputID: '',
  queueID: '',
  dropzoneID: '',
  files: [],
  fieldName: 'filedata',
  extraFields: {},
  lang: 'en',
  sizeLimit: 0,
  filesLimit: 0,
  method: 'post',
  timeout: null,
  autostart: false,
  templateFile: '<div id="file-[INPUT_ID]-[FILE_NUM]" class="fileup-file [TYPE]">' +
      '<div class="preview">' +
          '<img src="[PREVIEW_SRC]" alt="[NAME]"/>' +
      '</div>' +
      '<div class="data">' +
          '<div class="description">' +
              '<span class="file-name">[NAME]</span> (<span class="file-size">[SIZE_HUMAN]</span>)' +
          '</div>' +
          '<div class="controls">' +
              '<span class="remove" onclick="$.fileup(\'[INPUT_ID]\', \'remove\', \'[FILE_NUM]\');" title="[REMOVE]"></span>' +
              '<span class="upload" onclick="$.fileup(\'[INPUT_ID]\', \'upload\', \'[FILE_NUM]\');">[UPLOAD]</span>' +
              '<span class="abort" onclick="$.fileup(\'[INPUT_ID]\', \'abort\', \'[FILE_NUM]\');" style="display:none">[ABORT]</span>' +
          '</div>' +
          '<div class="result"></div>' +
          '<div class="fileup-progress">' +
              '<div class="fileup-progress-bar"></div>' +
          '</div>' +
      '</div>' +
      '<div class="clear"></div>' +
  '</div>',
});

7. Event handlers:

$.fileup({
  onSelect: function(file) {},
  onRemove: function(file_number, total, file) {},
  onBeforeRender: function() {},
  onAfterRender: function() {},
  onBeforeStart: function(file_number, xhr, file) {},
  onStart: function(file_number, file) {},
  onStartSystem: function(file_number, file) {
      var options = this.fileup.options;
      var $file   = $('#file-' + options.inputID + '-' + file_number);
      $file.find('.controls .upload').hide();
      $file.find('.controls .abort').show();
      $file.find('.result')
          .removeClass('error')
          .removeClass('success')
          .text('');
  },
  onProgress: function(file_number, ProgressEvent, file) {
      if (event.lengthComputable) {
          var options = this.fileup.options;
          var percent = Math.ceil(ProgressEvent.loaded / ProgressEvent.total * 100);
          $('#file-' + options.inputID + '-' + file_number + ' .fileup-progress-bar').css('width', percent + "%");
      }
  },
  onSuccess: function(file_number, response, file) {},
  onError: function(event, file, file_number, response) {},
  onErrorSystem: function(event, file, file_number) {
      var options = this.fileup.options;
      switch(event) {
          case 'files_limit':
              var message = i18n[options.lang].errorFilesLimit;
              message = message.replace(/%filesLimit%/g, options.filesLimit);
              alert(message);
              break;
          case 'size_limit':
              var size    = formatHuman(options.sizeLimit);
              var message = i18n[options.lang].errorSizeLimit;
              message = message.replace(/%sizeLimit%/g, size);
              message = message.replace(/%fileName%/g, file.name);
              alert(message);
              break;
          case 'file_type':
              var message = i18n[options.lang].errorFileType;
              message = message.replace(/%fileName%/g, file.name);
              alert(message);
              break;
          case 'bad_status':
          case 'error_load':
              var $file = $('#file-' + options.inputID + '-' + file_number);
              $file.find('.controls .abort').hide();
              $file.find('.controls .upload').show();
              $file.find('.result')
                  .addClass('error')
                  .text(i18n[options.lang].error);
              break;
          case 'old_browser':
              var message = i18n[options.lang].errorOldBrowser;
              alert(message);
              break;
      }
  },
  onAbort: function(file_number, file) {},
  onAbortSystem: function(file_number, file) {
      var options = this.fileup.options;
      var $file   = $('#file-' + options.inputID + '-' + file_number);
      $file.find('.controls .abort').hide();
      $file.find('.controls .upload').show();
      $file.find('.result')
          .removeClass('error')
          .removeClass('success')
          .text('');
  },
  onTimeout: function(file_number, file) {},
  onTimeoutSystem: function(file_number, file) {
      var options = this.fileup.options;
      var $file   = $('#file-' + options.inputID + '-' + file_number);
      $file.find('.controls .abort').hide();
      $file.find('.controls .upload').show();
      $file.find('.result')
          .removeClass('error')
          .removeClass('success')
          .text('');
  },
  onFinish: function(file_number, file) {},
  onSuccessSystem: function(response, file_number, file) {
      var options = this.fileup.options;
      var $file   = $('#file-' + options.inputID + '-' + file_number);
      $file.find('.controls .abort').hide();
      $file.find('.controls .upload').hide();
      $file.find('.result')
          .removeClass('error')
          .addClass('success')
          .text(i18n[options.lang].complete);
  },
  onDragOver: function(event) {
      event.stopPropagation();
      event.preventDefault();
      event.dataTransfer.dropEffect = 'copy';
  },
  onDragLeave: function(event) {},
  onDragEnd: function(event) {},
  onDragEnter: function(event) {
      event.stopPropagation();
      event.preventDefault();
      event.dataTransfer.dropEffect = 'copy';
  }
});

8. API methods.

// remove all files from the queue
$.fileup('input_id', 'remove', 'file_num or *');

// add new files to the queue
$.fileup('input_id', 'upload', 'file_num or *');

// cancel
$.fileup('input_id', 'abort', 'file_num or *');

Changelog:

2024-05-17

• Update

2024-05-16

• Changed drag event names

2024-04-03

• Add Turkish lang

2020-12-07

• Added a new method that allows you to add files to the queue.

2020-11-07

• added new events

2018-01-09

• allows to specify the file

---

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