jquery fileupload on button click

Question

I have used fileupload.js jquery plugin and followed this tutorial to implement this: ASP.NET Ajax file upload using jQuery File Upload plugin

This works great, but as soon file is selected using the input(fileuplaod control), event is raised and uploades the file. However, I'm trying to do this only after button click.

Here is the code:

<input id="fileupload" type="file" name="file" multiple="multiple"/>
<input id="btnSubmit" type="button" value="Start Upload"/>

    $('#fileupload').fileupload({
      //uploads file
    });

Need to do something like this:

  $('#btnSubmit').click(function () {
       $('#fileupload').fileupload({
         //uploads file
       });
    });

I guess we can do this using callback option but I could not get this properly:Callback Options

Answer 1

try this:

<input id="fileupload" type="file" name="file" multiple="multiple"/>

<script>
$('#fileupload').on('click', function(){
    //uploads file
});
</script>

use the 'on' in jQuery.

Greetings.

Answer 2

You can do this, upload files via 'add' option

In Markup

<input id="files" type="file" name="files" multiple="multiple"/>
<input id="fileupload" type="file" name="file" multiple="multiple" style="display:none;"/>
<input id="btnSubmit" type="button" value="Start Upload"/>

IN JQuery

$('#btnSubmit').click(function () {
    var inputs = $('#files'); 
    var arr = $.makeArray(inputs); // turn the jQuery objects into an array
    var filesList = $.map(arr, function (element, index) { 
        return element.files;
    });

    $('#fileupload').fileupload('add', { files: filesList }); // upload by calling 'add'
});

Answer 3

In your link about this plugin states: "As the documentation states, ‘add’ defaults to submitting the data using ‘data.submit( )’. But you might want to perform a validation on the selected file, for example, that the file extension is correct. So your implementation may look like this:"

if(valid)
 data.submit();

And below is: "Another alternative may be to instruct the upload plug-in not to start uploading the files immediately, and to validate when the user manually clicks on a certain “upload” button."

So i guess you have to just cut this data.submit() line and instead call this on your click button event handler.

Answer 4

try this:

<input id="fileupload" type="file" name="file" multiple="multiple" onClick="uploadFunction"/>

<script>
uploadFunction()
{
$('#fileupload').fileupload({
  //uploads file
});
}
</script>

Answer 5

button id="buttonUpload" onclick="return ajaxFileUpload();" style="font-size: 11px"> Upload />

img id="loading" src="images/loading.gif" style="display: none;" /> -- to make it progress bar

In Script tag include below and modify as per your requirement

function ajaxFileUpload() {

        $("#loading")
.ajaxStart(function() {
    $(this).show();
})
.ajaxComplete(function() {
    $(this).hide();
});

$.ajaxFileUpload
    (
        {
            url: 'AjaxImageUploader.ashx',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            data: {},
            success: function(data, status) {

            },
            error: function(data, status, e) {
                alert(e);
            }
        }
    )

        return false;
    }