Jquery File Upload, launch the upload in two steps

Question

I'm struggling with the plugin JQuery-File-upload.

I would like to divide the upload process in two steps.

1. Step1 - when a file is selected in the input[type=file], I would like to test its type and its size. The only accepted files should be image files with a size < 4MB.
   • If the file does not match with these constraints a popup is displayed with an error message.
   • If the file is OK I display the name of the file in the input[type=text]
2. Step2 - when the user click on the button "OK", the upload of the file start

I have the following code

    $('#file-img').fileupload({
        dataType: 'json',
        autoUpload: false,
        formData: {type: 'businessPicture'},
        add: function (e, data) {
            var uploadErrors = [];
            var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
            if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                uploadErrors.push('Not an accepted file type');
            }
            if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 4000000) {
                uploadErrors.push('File size is too big');
            }
            if(uploadErrors.length > 0) {
                alert(uploadErrors.join("\n"));
            } else {
                $.each(data.files, function (index, file) {
                    $("#txt-file-img").val(file.name);
                });
                    //I COMMENT THIS LINE because if I do not, the upload start here.
                //data.submit();
            }
        },
        done: function (e, data) {
            $("#output").html('<p class="valid">SUCCESS!</p>');
            $.each(data.result.files, function (index, file) {
                $("#preview-picture").css("max-width","160px");
                $("#preview-picture").css("max-height","150px");
                $("#preview-picture").attr("src",file.url+'#'+ new Date().getTime()); 
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#upload-progress .bar').css(
                'width',
                progress + '%'
            ).text(
                progress + '%'
            );
        },
        fail: function (e, data) {
            $("#output").html('<p class="error">FAIL!</p>');
        }
    });
});

I don't understand most of the example provided on the Plugin website. With the code above, the control (size & type) are OK but I don't know how to start the upload only after clicking on the button.

According to you what is the best way to manage this behaviour?

Thanks a lot

Answer 1

OK it's pretty easy. I just have to bind the click event on the button with the action data.submit directly under the event add of the instance $('#file-img').fileupload().

$('#file-img').fileupload({
    dataType: 'json',
    autoUpload: false,
    formData: {type: 'businessPicture'},
    add: function (e, data) {
        var uploadErrors = [];
        var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 4000000) {
            uploadErrors.push('File size is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            $.each(data.files, function (index, file) {
                $("#txt-file-img").val(file.name);
            });
            $("#btn_add_valid").on('click',function () {   
                data.submit();
            });
        }
    },
    //The rest of the function....