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

i would recommend you to rather use the original plugin as it has all that you need. check this for demo: http://blueimp.github.com/jQuery-File-Upload/ — Talha Ashfaque
– Talha Ashfaque, Commented Nov 5, 2012 at 6:30

MG_Bautista · Accepted Answer · 2012-11-02 22:32:35Z

5

+25

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.

answered Nov 2, 2012 at 22:32

MG_Bautista

2,6812 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yograj Gupta · Accepted Answer · 2012-10-28 08:38:35Z

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'
});

answered Oct 28, 2012 at 8:38

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

2 Comments

Ashwini Verma Over a year ago

Yograj thanks for your response. In your given sample following line returning null value: var filesList = $.map(arr, function (element, index) { return element.files; });

Ashwini Verma Over a year ago

or am I doing wrong while reading it: add: function (e, data) { $.each(data.files, function (index, file) { alert(file.name); } }); }

n.podbielski · Accepted Answer · 2012-11-05 19:25:21Z

2

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.

answered Nov 5, 2012 at 19:25

n.podbielski

6507 silver badges11 bronze badges

1 Comment

mmmeff Over a year ago

The problem OP is having is in regards to the context of the data object. This object is only available in callbacks from the plugin, for example, when a file is selected, not when the button is clicked.

ahmad jaberi · Accepted Answer · 2012-10-28 08:16:04Z

1

try this:

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

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

answered Oct 28, 2012 at 8:16

ahmad jaberi

375 bronze badges

1 Comment

Ashwini Verma Over a year ago

thanks Ahmad: but it doesn't initiate $('#fileupload').fileupload()

venkat · Accepted Answer · 2012-11-06 07:38:06Z

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;
    }

Collectives™ on Stack Overflow

jquery fileupload on button click

5 Answers 5

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related