Custom file upload button with blueimp jquery file upload

Question

I am struggling with the jquery file upload plugin by uploading my file as soon as I select the file in my input field.

I want the cusom submit button to download 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

Decision

There is an ADD event in file download that fires immediately after a file is selected. I wrote a click event inside an ADD event and thereby overriding the default behavior.

Tested and works as expected.

Solution 2 - JQuery Form Plugin

After some research, I found a better way to handle ajax file download. I am using the jQuery form plugin found at: http://www.malsup.com/jquery/form/

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

Answer 2

Are your inputs in one form?

Code change:

 <form id="fileupload" action="someAction" method="POST" enctype="multipart/form-data"> <span>Add files</span> <input type="file" name="files[]" multiple> <button type="submit" class="btn btn-primary start"> <span>Start upload</span> </button> </form> 

Answer 3

You can do this by connecting to the add event. There you do not allow the bootloader to execute its default behavior. Jquery-file-upload-docs explain this, but it's a little hard to find.

The blueimp biker download tutorial says:

 $(function () { $('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { data.context = $('<button/>').text('Upload') .appendTo(document.body) .click(function () { data.context = $('<p/>').text('Uploading...').replaceAll($(this)); data.submit(); }); }, done: function (e, data) { data.context.text('Upload finished.'); } }); }); 

In fact, it’s very important that the submit button you create is not inside the form.