Disabling auto-uploading on Blueimp jQuery File Upload

Question

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?

Bennion

Answer 1

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:

Tresatrescha

Exactly what I was looking for. The only problem is that the textbox doesn't show the filepath.. – Greenness

Answer 2

This is very easy to do as there is an option " autoUpload: true" which is set as default in the jquery.fileupload-ui.js

If you change it to false and you can manually code on the button Click event.

Boz

Thanks for the answer, I didn't have that file so I downloaded and included it in my project and on top of the relevant page. Then changed autoUpload to false as suggested but nothing changed. Still uploads as soon as I select the file. Do I need to change anything in code? I have these files included. May be there is something about it: + jquery-1.7.js + jquery-ui-1.8.17.custom.min.js + jquery.fileupload.js + jquery.iframe-transport.js + jquery.fileupload-ui.js – Bennion

@Emin-Here is the path of the Jquery fileupload-ui.js from which you have give the link jQueryFileUpload.Net / jQueryFileUpload / scripts / Default / jquery.fileupload-ui.js(Or) you can find the asp.Net Implementation from here webtrendset.com/2011/06/22/… – Boz

@Emin-Go to this page github.com/blueimp/jQuery-File-Upload/downloads download the latest version and open this in solution explorer and navigate to js folder and in that you can find jquery.fileupload-ui.js and search for autoupload and set it to 'false' instead of 'true'. and if you want to use bootstrapper then you should use Jquery 1.7+ – Boz

I had no luck and I am lost in all those javascript files.. Is there anyway that I can wrap the $('#fileup').fileupload({}); function into a jquery button.click ? – Bennion

@Emin-You cannot wrap that with the button click as you have to mention it in your parameters.And this is what I'm, having and you can test this simple one which has autoupload set to false.Check and let me know if you have any issues. Here is the link box.com/s/g54ychd24obrt8fplqu3 – Boz

I have all the files but this wouldn't be my implementation. can you understand anything from this link? github.com/blueimp/jQuery-File-Upload/issues/946 By the way, I do apologise if I have been of a headache to you and thanks for trying to help.. – Bennion

@Emin-No problem,it's my pleasure to help you and I think something might be messed up with you data can you post the source code so that I can have a look at that and repost it again. – Boz

Thank you.. here is the link for the files: box.com/s/3v6u7ejcmrc24buqxoso – Bennion

@Emin-Cleaned up your code and here is the working version box.com/s/fipso4tnk55bsb3grhgv – Boz

Very strange, I do not seem to have got it working. Can you please tell me what exactly did you change? so I can start from there? – Bennion

The import statemnts is the main cause try changing that to imports.microsoft.sqlserver – Boz

:) Ok I think I am going nuts here.. My problem is to prevent the jQuery upload plugin to autoUploading as soon as I choose a file. Instead, I want to click a button to do that.. I don't understand what this has to do with my server side code, which works fine. I think I'll go for another plugin.. Anyway, thanks a lot for trying to help. – Bennion

If you are using one that is not the UI one, just look in that corresponding js file. – Apfel