Mockup: iPad Mini Vector Mock-up
JS Plugin: Simple Modal - another window modal

JS Plugin: Fine Uploader - Version 2.1


"This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into their website."


- Multiple file select, progress-bar in FF, Chrome, Safari
- Drag-and-drop file select in FF, Chrome
- Uploads are cancelable
- No external dependencies
- Doesn't use Flash
- Fully working with HTTPS
- Keyboard support in FF, Chrome, Safari
- Tested in IE7+ (not IE10 yet), Firefox, Safari (OS X), and Chrome. Safari for Windows is not supported, nor is IE6 or earlier.
- Ability to upload files as soon as they are selected, or "queue" them for uploading at user's request later
- Display specific error messages from server on upload failure (hover over failed upload item)


- 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;

#Sample - Basic

<!DOCTYPE html>
        <meta charset="utf-8">
        <title>Fine Uploader Demo</title>
        <link href="client/fileuploader.css" rel="stylesheet">
        <div id="fine-uploader"></div>
        <script src="client/fileuploader.js"></script>
            function createUploader() {
                var uploader = new qq.FileUploader({
                    element: document.getElementById('fine-uploader'),
                    // Use the relevant server script url here
                    action: 'yourServerScript'
            window.onload = createUploader;

#Sample - with Twitter Bootstrap

<div id="bootstrapped-fine-uploader"></div>
    function createUploader() {
        var uploader = new qq.FileUploader({
            element: document.getElementById('bootstrapped-fine-uploader'),
            action: 'do-nothing.htm',
            uploadButtonText: '<i class="icon-upload icon-white"></i> Test me now and upload a file',
            template: '<div class="qq-uploader span12">' +
            '<pre class="qq-upload-drop-area span12"><span>{dragText}</span></pre>' +
            '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
            '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
            classes: {
                button: 'qq-upload-button',
                drop: 'qq-upload-drop-area',
                dropActive: 'qq-upload-drop-area-active',
                dropDisabled: 'qq-upload-drop-area-disabled',
                list: 'qq-upload-list',
                progressBar: 'qq-progress-bar',
                file: 'qq-upload-file',
                spinner: 'qq-upload-spinner',
                finished: 'qq-upload-finished',
                size: 'qq-upload-size',
                cancel: 'qq-upload-cancel',
                failText: 'qq-upload-failed-text',
                success: 'alert alert-success',
                fail: 'alert alert-error',
                successIcon: null,
                failIcon: null
    window.onload = createUploader;

#Sample - Limit Number of Uploaded Files - In this demo, have used both the onSubmit and the onComplete callbacks to handle a file counter. The uploader is also restricted in size (50 kB), , and in allowed extensions (jpeg, jpg, gif, and png).

<div id="filelimit-fine-uploader"></div>
    var fileCount = 0;
    var addedFiles = 0;
    var fileLimit = 3;
    $(document).ready(function() {
        var filelimituploader = new qq.FileUploader({
            element: $('#filelimit-fine-uploader')[0],
            action: 'do-nothing.htm',
            debug: true,
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            sizeLimit: 51200,
            onSubmit: function(id, fileName) {
                fileCount ++;
                if(fileCount > fileLimit) {
                    $('#filelimit-fine-uploader .qq-upload-button').hide();
                    $('#filelimit-fine-uploader .qq-upload-drop-area').hide();
                    return false;
            onCancel: function(id, fileName) {
                fileCount --;
                if(fileCount <= fileLimit) {
                    $('#filelimit-fine-uploader .qq-upload-button').show();
            onComplete: function(id, fileName, responseJSON) {
                if (responseJSON.success) {
                    addedFiles ++;
                    if(addedFiles >= fileLimit) {
                        $('#filelimit-fine-uploader .qq-upload-button').hide();
                        $('#filelimit-fine-uploader .qq-upload-drop-area').hide();


"This plugin uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere. "


Tags: plugin, jquery, bootstrap, ajax, firefox, safari, internet explorer, upload, chrome, drag, drop, multiple, files, js, javascript, css3, html5, php, perl, asp, java

Leave a Comment

No Comment

© Creative3x Ltd.