AjaxFileUpload automatically upload file once selected

Question

I have a standard AjaxFileUpload control

<asp:AjaxFileUpload ID="upManager" CssClass="fileUpload" runat="server" OnUploadComplete="upManager_UploadComplete" />

And instead of them having to press Upload, I just want the file to upload automatically once they have selected the file. Is there a way to do this?

You can refer to a solution, I used for a similar problem here : http://stackoverflow.com/questions/12372612/twitter-boostrap-fileupload/12471857#12471857 . — Amit Parashar, Mar 28 '13 at 11:41

score 5 · Accepted Answer · edited May 29 '13 at 13:21

5

Add reference to this script to Scripts collection of ToolkitScriptManager control or just put it at very bottom of page:

var legacyAddToQueue = Sys.Extended.UI.AjaxFileUpload.prototype._addToQueue;
Sys.Extended.UI.AjaxFileUpload.prototype._addToQueue = function(element){
    legacyAddToQueue.apply(this, [element]);
    this._doUpload();
}

Works well from console at this page: AjaxFileUpload Demonstration

Also, in my opinion should be better to tweak ACT sources and add new property like UploadAutomatically to this control. Let me know if you'll prefer this option and need additional details about how to to such staff

UPDATED: try this script for new AjaxFileUpload (must work for new and old versions but not tested yet)

if (Sys.Extended.UI.AjaxFileUpload.prototype._addToQueue) {
    var legacyAddToQueue = Sys.Extended.UI.AjaxFileUpload.prototype._addToQueue;
    Sys.Extended.UI.AjaxFileUpload.prototype._addToQueue = function (element) {
        legacyAddToQueue.apply(this, [element]);
        this._doUpload();
    };
}else if(Sys.Extended.UI.AjaxFileUpload.Control){
    var legacyaddFileToQueue = Sys.Extended.UI.AjaxFileUpload.Control.prototype.addFileToQueue;
    Sys.Extended.UI.AjaxFileUpload.Control.prototype.addFileToQueue = function(fileItem){
        if(legacyaddFileToQueue.apply(this, [fileItem])){
            this._isUploading = true;
            this.enableControls(this._isUploading);
            this._processor.startUpload();
        }
    };
}

edited May 29 '13 at 13:21

Adam

16,089
6
66
109

answered Mar 28 '13 at 09:47

Yuriy Rozhovetskiy

22,270
4
37
68

This code no longer works after the April 2013 update to the Ajax Control Toolkit – Adam May 29 '13 at 09:22
Awesome, I was actually about to get stuck into modifying it. Thanks for the quick response. – Adam May 29 '13 at 11:45
This code does work but it takes a very long time. I am not sure why. e.g. it goes to uploading instantly. Takes 15 seconds to then say uploaded. Then takes 10-15 seconds to remove the Upload button and say Uploaded next to the file. – Adam May 29 '13 at 13:24
Does upload work faster if you remove this script and upload files manually? – Yuriy Rozhovetskiy May 29 '13 at 13:26
Actually no it doesn't. Apologies, my issue lies elsewhere. Thanks for all your help. – Adam May 29 '13 at 15:09
@YuriyRozhovetskiy The above code is not working with the latest AjaxControlToolkit stable release - Dec 2013. Would you please like to edit your code for the benefit of us :). Thank you! – blue piranha May 01 '14 at 19:14

score 3 · Answer 2 · answered May 30 '13 at 10:31

3

this works in the newest control toolkit

<asp:AjaxFileUpload onchange="$('.ajax__fileupload_uploadbutton').trigger('click');" runat="server" />

answered May 30 '13 at 10:31

PanRycho

57
2

Nice catch. But I'm afraid this won't validate files on client and won't handle drag'n'drop files to control's drop area. – Yuriy Rozhovetskiy May 30 '13 at 11:35

score 0 · Answer 3 · answered May 30 '13 at 12:53

0

you're right. Just replace it with

$(".ajax__fileupload").bind("change", function () { setTimeout(function () { $('.ajax__fileupload_uploadbutton').trigger('click'); }, 100); });
$(".ajax__fileupload_dropzone").bind("drop", function () { setTimeout(function () { $('.ajax__fileupload_uploadbutton').trigger('click'); }, 100); });

answered May 30 '13 at 12:53

PanRycho

57
2

This almost works, but it triggers "Please Select File(s) To Upload" Modal, clicking ok on the Modal then triggers the upload automatically, but it's very confusing to the user. – Joe Stellato Sep 12 '14 at 12:36

AjaxFileUpload automatically upload file once selected

3 Answers3

Linked