How to upload a file after submit clicked and not on "add" event?

Konrad

unread,

Oct 29, 2012, 4:35:34 AM10/29/12

to jquery-f...@googlegroups.com

Hi,

I found this old tutorial which I think would answer my question, but it is out-of-date for the latest version.

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-queue-files-and-start-uploads-with-a-button-click

I would like to upload one image file together with some additional form data. It should be uploaded when the form submit button was clicked and not when the user selected a file via the input field automatically. I tried to set "autoUpload: false". But the add function with data.send() is still called immediately. I removed the data.send() but where should I add this function then? When I click on the form submit button the file is not anymore a part of the forme. How to I archive a delayed upload?

1. select a file,

2 .enter more details in other fields

3. click the submit button and upload the file

Cheers

Ludovico Mattiuzzo

unread,

Nov 3, 2012, 4:04:58 PM11/3/12

to jquery-f...@googlegroups.com

I don't know how to do that with the submit button, (I'd like to know) but if you want to upload the file with a normal button try this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<input id="Button1" type="button" value="button" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
 add: function (e, data) {
                $("#Button1").one('click', function (e) {
                    e.preventDefault();
                    data.submit();
                });
            },
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

Brian Barbutti

unread,

Nov 8, 2012, 3:20:37 PM11/8/12

to jquery-f...@googlegroups.com

Hi Konrad,

Have you figured out how to do this with the most recent version of the plugin?

Thanks!

Konrad Karkos

unread,

Nov 8, 2012, 3:55:21 PM11/8/12

to jquery-f...@googlegroups.com

Sorry, no.

2012/11/9 Brian Barbutti <barb...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "jQuery-File-Upload" group.
To post to this group, send email to jquery-f...@googlegroups.com.
To unsubscribe from this group, send email to jquery-fileupl...@googlegroups.com.
Visit this group at http://groups.google.com/group/jquery-fileupload?hl=en.

Nick Hoffman

unread,

Nov 20, 2012, 9:42:21 AM11/20/12

to jquery-f...@googlegroups.com

I'd really like to know how to do this, too.

a9.entropy

unread,

Nov 23, 2012, 4:21:39 AM11/23/12

to jquery-f...@googlegroups.com

The method suggested by Ludovico Mattiuzzo does work indeed.

I have also added it to the FAQ: How to Upload a file after form is submitted?

$('#fileupload').fileupload({
    /* Other options here */
    add: function (e, data) {
        $('#upload-button-id-here').one('click', function (e) {
            e.preventDefault();
            data.submit();
        });
    }
});

Reply all

Reply to author

Forward