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

Answer 1

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 2

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 3

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 4

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 5

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 6

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.