jQuery File Upload Options

Posted By : Sagar Watts | 04-Dec-2017

jQuery File Upload comes with lots of configurable options . We will discuss most of the options available in the jquery.fileupload.js . The plugin provide us another JS file jquery.fileupload-ui.js for user interface, which includes all the option from the basic and add some advance options. This plugin use jquery ajax call to make the upload request. So whatever the options we will set, they will be passed to ajax call. Also this allow us to define any callback for ajax calls.
 

The most important thing here to notice is that we should not change cache (by default false), content type and process data options of the ajax to make file upload work fine .Apart from that there are number of ajax options which we can change.


Url:  You can pass the server address, where you want your file to upload and handle the file upload at server end. If it not defined, the plugin will search for form action property for search. Even if that is not defined it will be url of current page. We can set this option as we set in ajax call . here is the code for that :

$('#fileupload').fileupload({
        url: url
});

    Also, we can change the type and dataType for the ajax calls.


Drop zone : One of the most useful feature of the plugin is drag and drop feature. So we can set the dropZone option to make it working for us. By default the drop zone is complete page, however we can set it to null or left it blank to disable this option. The code will look like this :

	$('#fileupload').fileupload({
    dropZone: $('#dropzone')	
});

  3. SingleFileUploads : Since we can select to upload multiple files ,  we have the option to     set the upload behaviour for files. i.e  we can choose to upload all the selected files in one call or different call for each file. By default, each file is uploaded through different upload request, however we can set an option singleFileUploads to false to upload them in single file.

 

     4. limitMultiFileUploads : Since we are uploading multiple files, we have an option to put check on the number of files we want to upload in one go. With this option we can set the number of files (in case of multiple files) we can upload. By default we can upload any number of files. Here is the code to set this options :

$('#fileupload').fileupload({
    limitMultiFileUploads :2	// any number greater than zero
});

       5 .  formData :  We can send the additional data along with the file using the formData options. We can pass the array of objects to pass along with the upload request. Here we can also pass the function returning arrays or form data object.     The code will look like this :
$('#fileupload').fileupload({
    formData:  [{
        		name: 'a',
           value: 1 }]
});

Thanks 

About Author

Author Image
Sagar Watts

Sagar is a bright Web App Lead Developer , he has great knowledge of core Java and advance Java. His hobbies are Net Surfing, Listen Music and Reading Books.

Request for Proposal

Name is required

Comment is required

Sending message..