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?

Heliotropism

You can refer to a solution, I used for a similar problem here : #12373112 . – Coonskin

Answer 1

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();
        }
    };
}

Conference

This code no longer works after the April 2013 update to the Ajax Control Toolkit – Heliotropism

Awesome, I was actually about to get stuck into modifying it. Thanks for the quick response. – Heliotropism

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. – Heliotropism

Does upload work faster if you remove this script and upload files manually? – Conference

Actually no it doesn't. Apologies, my issue lies elsewhere. Thanks for all your help. – Heliotropism

@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! – Revile

Answer 2

this works in the newest control toolkit

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

Rehash

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. – Conference

Answer 3

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); });

Rehash

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. – Understanding