[AJAX] Upload HTML 5 Library for Uploading Files | FileUp

Upload-HTML-5-Library-for-Uploading-Files

Upload HTML5 is a library for Uploading files to the server and supports multiple file selections, drag, and drop, and jQuery progress bars.

The file upload plugin makes it easy to upload your local files to servers via AJAX requests.

How to make use of it:

1. Load the jQuery FileUp plugin’s information within the webpage.

<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 choose button like this:

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

3. Create a DIV container to show the added standing.

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

4. Initialize the plugin to generate a primary 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 picture information within the file upload.

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

6. Customize the file uploader by bypassing the next choices 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';
  }
});

Documentation

1. Events

  • onSelect (file)
  • onRemove (file_number, total, file)
  • onBeforeStart (file_number, xhr, file)
  • onStart (file_number, file)
  • onProgress (file_number, ProgressEvent, file)
  • onSuccess (file_number, response, file)
  • onError (event, file, file_number, response)
  • onAbort (file_number, file)
  • onTimeout (file_number, file)
  • onFinish (file_number, file)
  • onDragEnter (event)
  • onDragOver (event)
  • onDragLeave (event)
  • onDragEnd (event)

System events

  • onStartSystem (file_number, file)
  • onSuccessSystem (file_number, file)
  • onErrorSystem (event, file, file_number)
  • onAbortSystem (file_number, file)
  • onTimeoutSystem (file_number, file)

2. Options

  • 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:

Flexible jQuery Based AJAX File Uploader, FileUp Plugin/Github, file upload javascript


See Demo And Download

Official Website(shabuninil): Click Here

This superior jQuery/javascript plugin is developed by shabuninil. For extra Advanced Usage, please go to the official website.

Share