Best jQuery File Upload Plugins & Tutorials with Demo

    Dragio.js : JavaScript Drag Drop File Upload Library

    Dragio.js : JavaScript Drag Drop File Upload Library

    Dragio.js is a javascript class to work with file upload. Custom responsive forms, progress bars, drag ‘n’ drop function, Ctrl + V paste, image preview etc.

    Filer : jQuery Custom File Upload Inputs Plugin

    Filer : jQuery Custom File Upload Inputs Plugin

    Filer is jQuery plugin for custom file upload inputs.

    Creative Upload Interaction with JavaScript & Canvas

    Creative Upload Interaction with JavaScript & Canvas

    Well in this tutorial we will see how to implement a creative component to upload files, using as inspiration the previous animation by Jakub Antalík. The Idea is to bring better visual feedback around what happens with the file after is dropped.

    We will be focusing only on implementing the drag and drop interactions and some animations, without actually implementing all the necessary logic to actually upload the files to the server and use the component in production.

    Filepond : Flexible JavaScript File Upload Plugin

    Filepond : Flexible JavaScript File Upload Plugin

    Filepond  is a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

    imgedit : jQuery plugin to Edit an Inline Image

    imgedit : jQuery plugin to Edit an Inline Image

    Imgedit is a small plugin to edit an inline image, what does this plugin do is make an image editable by clicking on it and uploading a new one with a preview (it replaces the original clicked image) then the plugin adds a file input to the target form.

    SSi-Uploader : An awesome jQuery Uploader

    SSi-Uploader : An awesome jQuery Uploader

    SSi-Uploader is an awesome jQuery uploader plugin.

    How to Get File Name, Size, Type Count in jQuery

    How to Get File Name, Size, Type Count in jQuery

    This article explains how to get the file name, file size (in bytes), file type (Text/PDF/CSS files) and total selected file counts in jQuery before uploading it to the server.

    Using File interface, we are able to get the information about files and allows to access their content.

    Upload Preview jQuery Plugin

    Upload Preview jQuery Plugin

    This jQuery plugin provides an easy way to preview your uploads before they’re actually uploaded to the server. So if you selected an image or audio file from your hard drive, it will generate a live preview of the selected image or audio player for the audio file.

    Fileuploader : Beautiful and powerful HTML5 File Uploading Tool

    Fileuploader : Beautiful and powerful HTML5 File Uploading Tool

    Fileuploader is a beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.

    • File preview with image thumbnail or icon
    • File image thumbnail can be generated in canvas to resize it perfectly for given with and height
    • Render synchron the file preview
    • File icon background is generated from file extension
    • Customize your own input and thumbnail elements
    • Responsive and fancy animations
    • Choose multiple files from different folders
    • Drag&Drop feature
    • Upload each file with Ajax
    • Upload synchron the files
    • Upload progressbar with many data available
    • Start, retry and cancel upload actions
    • Paste images from clipboard (only in Chrome)
    • Validate the file’s limit, size and extension. You can also use your own function
    • Edit mode for already uploaded files
    • All files are in one list in a hidden input
    • Use input HTML attributes to configurate it
    • HTML template renderer using Text variables
    • CSS file icon
    • PHP upload helper
    • PHP generates an array with many file informations
    • PHP can create a custom file name
    • API and more than 24 Callbacks to manipulate freely the appearance and functionality of your file input

    jQuery Bootstrap File Input Plugin

    jQuery Bootstrap File Input Plugin

    File input fields look differently in all browsers. It’s a pain in the arse to design something that looks nice in all browsers and it sucks that support for this is not available in Twitter Bootstrap.

    This jQuery plugin is designed to make all file input fields look like standard Twitter Bootstrap buttons.