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.


  • 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="//"></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>
  params : {
    action : 'fileuploader'
  maxfilesize : 1000000

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


  // 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
  '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
  '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' : {}


See Demo And Download


Official Website(cubiclesoft): Click Here

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

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

Your email address will not be published. Required fields are marked *