AjaxFileUpload automatically upload file once selected

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

Method 2

this works in the newest control toolkit

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

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0