Using Fine Uploader in Your Web App

Posted By : Archna Dhingra | 10-Jan-2014

html5

Introduction to Fine Uploader

Multiple file upload plugin with progress-bar, drag-and-drop, direct-to-S3 uploading features. Fine Uploader does not require an introduction more than this in this techological world.

Features Supported by Fine Uploader

1. Progress bar - Fine Uploader is furnished with a fully customizable progress bar included in the UI mode. One can also build it with the help of a friendly API.

2. Drag and Drop - To ease the users, fine-uploader offers it users to drag and drop files/folders straight-away into the browser.

3. Retry - Fine Uploader is a smart one. It can detect network disturbances and notify the users, or will retry to upload the files.

4. Validators - You can also restrict the user to upload specific file types, given size limit, number of files, image dimensions, or one can even write his own custom validator.

5. File Chunking/Partitioning - This special feature of splitting a file into smaller pieces allows for a more efficient overall upload.

6. Pause/Resume Uploads - One can also pause an in-progress upload, and safely resume it from where you left.

7. Delete Uploaded Files - Delete the files you don't need.

8. Upload to the Cloud - One can also upload files directly to Amazon’s Simple Storage Service (S3).

9. Image Previews - Fine Uploader also provides an in-browser preview of images before uploading.

10. Multiple file selection - One can select multiple files to upload at once.

11. Auto and Manual Upload - Fine Uploader allows you to start uploading files as and when they are selected, or wait for the user to start.

12. Cancel Uploads - Fine Uploader also provides an option to cancel one or all of the currently uploading files.

13. Edit file names - This allows the user to edit names of files being uploaded.

14. Multiple upload buttons - Fine Uploader also supports complex web applications that may require multiple upload inputs.

Here is a Basic Uploader

Fine Uploader is cross-browser, dependency-free, and 100% Javascript, so is as simple to use. Just include one JavaScript file and its done.

Include the following two files

	<script type="text/javascript" src="fineuploader.js"></script>
	<link rel="stylesheet" type="text/css" href="fineuploader.css">

Javascript function for your Uploader

	<script>
        $(document).ready(function() {
	        createSampleUploader();
	    });
	   
        function createSampleUploader() {
	        var uploader = new qq.FineUploader({
	            element: document.getElementById('fine-uploader'),
	            text: {
	                uploadButton: 'Upload' //change this to the text you want on upload button
	            },
	            request: {
	                endpoint: 'server/handleUploads'   //server url
	            },
	            multiple: false,    //restrict to one file upload/selection at once
	            validation: {
	                allowedExtensions: ['jpg','jpeg','png','gif','bmp'],  //file types which can be uploaded
	                sizeLimit: 256000 // 250 kB = 250 * 1024 bytes
	            },
	            callbacks: {
	                onComplete: function(id, fileName, responseJSON) {
	                   //write here what you want to do after uploading the file
	                }
	            }
	        });
	    }
	</script>

DOM Element

	<div id="fine-uploader"></div>

Customizations to Fine Uploader

By default, the fine-uploader supports auto-upload of files. To stop auto-upload and wait for user's response to start the upload, make autoUpload option false.

	autoUpload: false

Edit file name while uploading file

	editFilename: {
	    enabled: true
	}

The itemLimit validation enforces a maximum number of items uploaded.

	itemLimit: 2

You can also customize the Fine Uploader UI using its classes.

	function configureFineUploaderUI()
	{
	    $('.qq-upload-size').html('<a href="#">Delete</a>');
	    $('.qq-upload-success').css('background-color','white');
	    $('.qq-upload-file').css('color','black');
	}

Thanks,

Archna Dhingra.