Introducing Fine Uploader
Javascript plugin tool to give your users a smooth experience when uploading files to your website.
How it works
Displays progress bar while uploading files through XMLHttpRequest (AJAX) in FF3.6+, Safari4+, Chrome. For other browsers, falls back to hidden-iframe-based uploads.
Browser support
Does NOT require Flash, jQuery, or any external libraries.
- IE7+ (including IE10)
- Firefox
- Safari (OS X)
- Chrome
- IOS6
- Android
Server support
Any available server technology. Common implementations with:
- ASP.NET
- ColdFusion
- Java
- Node.js
- Perl
- PHP
- Python
- Erlang
- Rails
Features
- Multiple file select, progress-bar in Firefox, Chrome, Safari, and IE 10
- Drag-and-drop file select in FF, Chrome, Safari, and IE 10
- Cancel uploads
- External dependencies not required
- Upload files immediately or queue them for later
- Customizable upload failure error messages from server
- Auto or manual retry for failed uploads
- Customize file validation if necessary
- Callbacks available during the upload process
- Send parameters server-side along with each file
- Upload directories via drag and drop (Chrome 21+)
- Include parameters in the query string OR the request body
- Submit files to be uploaded via the API
- Split up a file into multiple requests (file chunking/partitioning)
- Resume failed/stopped uploads from previous sessions
- Delete uploaded files
- CORS/XSS (cross-domain request) support
- Upload images via paste
- Customize file upload and size limits
Setup
You need only to include a CSS file and a JavaScript file, and handle the uploads on the server side according to the technology you are using. There are absolutely no other dependencies.
You can quickly set up an HTML page in order to use Fine Uploader:
- Download and unpack the latest version of Fine Uploader;
- Use one of the provided server scripts, or write down your own;
- Set up a basic markup to begin with;
- Have fun!
You can use the following basic markup:
Minimal Out-of-the-Box Demo
Here we use default settings and default styles. Below you can see the bootstrapped demo and jQuery wrapper demo.
Try it out!
You can have a minimal setup without using neither jQuery nor Twitter Bootstrap. You simply use the minimal HTML markup above. The relevant HTML tag and Javascript code for this demo are extracted on the right.
Here for the demo purposes, we active the debug mode (which defaults to false). You can see the logs in real time in your browser’s JavaScript console.
Bootstrapped Minimal Demo
Default settings, but we include support for Twitter Bootstrap. You can also see the jQuery wrapper demo, and even more demos below.
In order to style your uploader’s look, you can customize the template classes as you like.
We use here both Fine Uploader and Twitter Bootstrap’s CSS and add some styling reset.
jQuery Wrapper Minimal Demo
Here we use default settings and default styles, this time with Fine Uploader’s jQuery optional wrapper plugin. Above you can see the bootstrapped demo.
More demos
Includes more features, and also shows how to customize Fine Uploader Basic.
Head over one of the following pages to see how to customize further Fine Uploader.
