Disabling auto-uploading on Blueimp jQuery File Upload

Subliminal Hash picture Subliminal Hash · Mar 6, 2012 · Viewed 23.8k times · Source

I am using blueint jquery.fileupload plugin to upload files using asp.net

I have a situation where I have a page to allow the user to select a category (dropdownlistbox), a title (for the uploaded file - TextBox) and a file input (handled by the plugin).

the plugin: https://github.com/i-e-b/jQueryFileUpload.Net

javascript/jquery:

 $('#fileup').fileupload({
                    replaceFileInput: false,
                    formData: function (form) {
                        return [{ name: 'dcat', value: $('#ddlCats').val() }, { name: 'title', value: $('#txtTitle').val()}];
                    },
                    dataType: 'json',
                    url: '/_handlers/FileHandler.ashx',
                    add: function (e, data) {
                        var valid = true;
                        var re = /^.+\.((doc)|(xls)|(xlsx)|(docx)|(pdf)|(pts))$/i;
                        $.each(data.files, function (index, file) {
                            if (!re.test(file.name)) {
                                $('#uploaded').html('This file type is not supported');
                                valid = false;
                            }
                        });
                        if (valid)
                            data.submit();
                    },
                    done: function (e, data) {
                        $.each(data.result, function (index, file) {
                            $('#uploaded').html(file);
                        });
                        GetFiles($('#ddlCats').val())
                    },
                    error: function () {
                        alert('An error occured while uploading the document.');
                    }
                });

html:

<div id="fUpload">
<span style="font-weight:bold;">Yeni Belge:</span><br />
    <table class="ktoeos">
        <tr>
            <td>Category:</td>
            <td> <select id="ddlCats"></select></td>
        </tr>
        <tr>
            <td>Document Description:</td>
            <td><input type="text" id="txtTitle" /></td>
        </tr>
        <tr>
            <td>Select Document:</td>
            <td><input type="file" name="file" id="fileup" /></td>
        </tr>
        <tr>
           <td colspan="2"><input type="submit" id="btnSubmit" value="Upload" /></td>
        </tr>
    </table>
    <div id="uploaded"></div>

My problem is, the file gets uploaded (through an http handler) straight after I select a file. I can handle it to submit other form data along with it however, I want to fire this event on the button submit as I need to carry out some validation. Also the user might want to select a file first and then fill the other parts of the form, which in this case he/she cannot do, due to the form being submitted before he/she can do that.

Since I am not a very good javascript programmer, I have no idea if this functionality is already available (which probably is) in the .js files available with the plugin. Any ideas what I need to change or do?

Answer

Walter picture Walter · Jun 27, 2012

The add callback is invoked as soon as files are added to the widget, so you need to override it to pause the upload and then start it with a button click.

add: function (e, data) {
    $("#btnSubmit").click(function () {
        // validate file...
        if(valid)
            data.submit();
    });
}

Update: The documentation has a better example of this now: