Custom file upload button with blueimp jquery file upload

Question

I am struggeling with the jquery file upload plugin is uploading my file as soon as I choose the file in my input field.

I want to have a cusom submit button that upload the file..

How can I do this?

Markup:

<span>Add File</span>
<input id="fileupload" type="file" multiple="" data-url="upload.ashx" name="files[]" />

<label for="file_name">Name:</label>
<input type="text" name="file_name" id="file_name" />

<input type="button" id="uploadFileBtn" value="Upload" />

Javascript:

$('#fileupload').fileupload(
{
dataType: 'json',
done: function (e, data) {
    alert("success");                               
}
});

Answer 1

Solution

The fileupload has an ADD event that triggers as soon as a file is selected. I wrote my click event inside the ADD event and thereby overriding default behaviour.

Tested and it works as expected.

Solution 2 - Jquery Form Plugin

After some researching I found a better way to deal with ajax fileupload. I am using the Jquery Form Plugin found at: http://www.malsup.com/jquery/form/

It works just like a regular form and can handle file inputs.