Convert An HTML File Input Type Into a Fancy File Uploader

jQuery Fancy File Uploader is a jQuery extension for converting an HTML file input type into a portable fancy file uploader. Choose from an MIT or LGPL license.

A great file upload plugin based on the jQuery File Upload plugin that turns regular file entry into a responsive, mobile-friendly upload interface with support for drag-and-drop, keyboard interactions, file preview, split file upload, and more.

Features

Beautiful, compact, and fully responsive layout.
Drag-and-drop dropzone with paste support.
Full keyboard navigation.
Client-side file naming.
Preview support for images, audio, and video.
Supports recording video and audio directly from a webcam, microphone, and other media sources.
Chunked file upload support.
Lots of useful callbacks.
Automatic retries with exponential fallback.
Multilingual support.
Has a liberal open-source license. MIT or LGPL, your choice.
Designed for relatively painless integration into your project.
Sits on GitHub for all of that pull request and issue tracker goodness to easily submit changes and ideas respectively.

Must Read: Pure Javascript File Tree Filter From JSON Input | js-directory-tree

How to make use of it:

1. Load the CSS file ‘fancy_fileupload.css‘ within the head section of the webpage.

<link rel="stylesheet" href="fancy_fileupload.css">

2. Load the file uploader plugin’s script.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.fileupload.js"></script>
<script src="jquery.iframe-transport.js"></script>
<script src="jquery.fancy-fileupload.js"></script>

3. Call the plugin on the file input field.

<input id="demo" type="file" name="files" accept=".jpg, .png, image/jpeg, image/png" multiple>

$('#demo').FancyFileUpload({
  params : {
    action : 'fileuploader'
  },
  maxfilesize : 1000000
});

4. All attainable plugin options to customize the file uploader.

$('#demo').FancyFileUpload({

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

  // key-value pairs to send to the server
  'params' : {},

  // editable file name?
  'edit' : true,

  // max file size
  'maxfilesize' : -1,

  // a list of allowed file extensions
  'accept' : null,

  // 'iec_windows', 'iec_formal', or 'si' to specify what units to use when displaying file sizes
  'displayunits' : 'iec_windows',

  // adjust the final precision when displaying file sizes
  'adjustprecision' : true,

  // the number of retries to perform before giving up
  'retries' : 5,

  // the base delay, in milliseconds, to apply between retries
  'retrydelay' : 500,

  // an object containing valid MediaRecorder options
  // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  'audiosettings' : {},

  // whether or not to display a toolbar button with a webcam icon for recording video directly via the web browser 
  'recordvideo' : false,

  // an object containing valid MediaRecorder options
  // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  'videosettings' : {},

  // A valid callback function that is called after the preview dialog appears. Useful for temporarily preventing unwanted UI interactions elsewhere.
  'showpreview' : function(e, data, preview, previewclone) {
    // do something
  },

  // A valid callback function that is called after the preview dialog disappears. 
  'hidepreview' : function(e, data, preview, previewclone) {
    // do something
  },

  // A valid callback function that is called during initialization to allow for last second changes to the settings. 
  // Useful for altering fileupload options on the fly. 
  'preinit' : null,

  // A valid callback function that is called at the end of initialization of each instance. 
  'postinit' : null,

  // called for each item after it has been added to the DOM
  'added' : function(e, data) {
    // do something
  },

  // called whenever starting the upload
  'startupload' : function(SubmitUpload, e, data){
    // do something
  }

  // called whenever progress is updated
  'continueupload' : function(e, data) {
    // do something
  },

  // called whenever an upload has been cancelled
  'uploadcancelled' : function(e, data) {
    // do something
  },

  // called whenever an upload has successfully completed
  'uploadcompleted' : function(e, data) {
    // do something
  },

  // jQuery File Upload options
  'fileupload' : {},

  // translation strings here
  'langmap' : {}

});