jQuery file upload: Is it possible to trigger upload with a submit button?

Question

I'm using jQuery file upload for AJAX-based uploads. It always starts uploading after a file is selected. Is it possible to change the behavior to use the "submit"-button? I am aware of Issue #35, but the Option beforeSend seems to have been removed.

I am using the Basic Plugin, not the full version.

Maybe I should just switch to plain-XHR-based uploading as suggested there: jQuery Upload Progress and AJAX file upload.

Answer 1

if you have the button

<button id="up_btn">Upload</button>

You can try with

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
    },
});

EDIT: according to comments a better answer considere off to avoid duplicated requests. (also work unbind, I do not check if is bind and unbind but jquery team recommend on and off link since 1.7)

Answer 2

None of these answers will work for multiple file uploads. My case involved allowing multiple attachments in a comment thread. So I needed to save the comment first to get the id, and then upload and save all the attachments. This seems like a trivial thing, but with this plugin its not that intuitive. My solution uses custom events in jQuery, and works great.

The currently accepted answer binds to the click event of a button in the 'add' callback, but the 'add' callback is called once for each file. If you unbind all the events each time only the last file will upload.

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        $("#up_btn").on('customName', function (e) {
            data.submit();
        });
    },
});

By binding the submit button to a custom name, we can do whatever preprocessing we want before submitting the images. In my case it involved submitting the comment and getting back the comment id which I did in a separate call. This code just responds to the click, but you can do whatever you want before triggering the event.

$("#up_btn").on('click', function (e) {
    e.preventDefault();
    $("#up_btn").trigger( "customName");
});

You can pass any data you want when you trigger the event, so it really gives you complete control over your form.

Answer 3

You can also find in jquery.fileupload.js

There is an 'autoUpload' option in line 142.

uploadedBytes: undefined,
// By default, failed (abort or error) file uploads are removed from the
// global progress calculation. Set the following option to false to
// prevent recalculating the global progress data:
recalculateProgress: true,
// Interval in milliseconds to calculate and trigger progress events:
progressInterval: 100,
// Interval in milliseconds to calculate progress bitrate:
bitrateInterval: 500,
// By default, uploads are started automatically when adding files:
autoUpload: true    // <<---------- here

Answer 4

You can do that by hooking into the add event. There you prevent the uploader from doing its default behavior. The jquery-file-upload-docs explain that, but it's a bit hard to find.

The following is written in the blueimp basic uploader tutorial:

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

It actually is very important, that the submit button you're creating is not inside the form!

Answer 5

Make sure not to stack events by attaching event every time the file is added. That way the form will be submitted multiple times.

I would do something like this

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
    },
});

Notice the off() method to remove all previous attached events.

Answer 6

for using the add templates to follow showing upload and download must do it this way

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        var that = this;
     $.blueimp.fileupload.prototype.options.add.call(that, e, data);
        $("#up_btn").on('click', function () {
            data.submit();
        });
    },
});

Answer 7

In the downloaded sample Navigate to js/jquery.fileupload-ui.js and in that you will have autoUpload which is set true by default go ahead and it to "false" then you can use submit behaviour.

EDIT:

Try this for the basic implementation:

 <script>
    /*global $ */
    $(function() {


        $('.file_upload').fileUploadUI({
            url: 'FileUpload.ashx',
            method: 'POST',
            uploadTable: $('#files'),
            downloadTable: $('#files'),
            buildUploadRow: function (files, index) {
                return $('<tr><td>' + files[index].name + '<\/td>' +
                    '<td class="file_upload_progress"><div><\/div><\/td>' +
                    '<\/td><\/tr>');
            },
            buildDownloadRow: function(file) {
            return $('<tr id="file_'+file.name+'"><td>' + file.name + '<\/td>'
                + '<td class="file_uploaded">' +
                '<span class="ui-icon ui-icon-check"><\/span>' +
                '<\/td><\/tr>');

            }, beforeSend: function(event, files, index, xhr, handler, callBack) {
                if (files[index].size > 500000) {
                    handler.uploadRow.find('.file_upload_progress').html('<span class="ui-icon ui-icon-alert"><\/span>FILE TOO BIG!');
                    setTimeout(function() {
                        handler.removeNode(handler.uploadRow);
                    }, 10000);
                    return;
                }
                callBack();
            }
        });
    });
</script> 

Answer 8

Here is how I implemented file upload by using a button:

Here is the button:

 <button id="cmdSave" type="button" class="btn btn-primary" onclick="SaveInfo();">Save</button>

Here is the input element:

    <input id="fileupload" type="file" name="files[]" style="display: none;">

Here is the SaveInfo() function:

    //use this function to save Info with Attached file
    function SaveInfo() {
        // setup our wp ajax URL
        var action_url = document.location.protocol + '//' + document.location.host + '/SaveInfo';

        $('body').addClass('waiting');
        //get the file(s)
        var filesList = $('input[type="file"]').prop('files');

        //Initialize the file uploader
        $('#Editor').fileupload();           //Editor is the Id of the form

        //Along with file, this call internally sends all of the form data!!!
        $('#Editor').fileupload('add', {
            files: filesList,
            url: action_url
        })

        $('#Editor').bind('fileuploaddone', function (e, data) {
            e.preventDefault(); //stop default behaviour!
            if (data.result.status == 1) {  //saved!
                 //do something useful here...
            }
            $('body').removeClass('waiting');
        });

        // Callback for failed (abort or error) uploads:
        $('#Editor').bind('fileuploadfail', function (e, data) {
            e.preventDefault(); //stop default behaviour!
            $('body').removeClass('waiting');
        });
    }

Note: It may not be very elegant, but it works for me. This will also send all of the fields within the form to the server. This will ONLY send the fields within the form if the file is also being uploaded. If the file is not present, this will NOT send form data to the server! Although I did not test it with multiple files, this method may be expanded to do multiples as well. When I try it, I will update this post with the info.