ajaxToolkit:AjaxFileUpload automatically upload

Question

I use ajaxToolkit:AjaxFileUpload. It works when the user clicked in the start upload button. I want to change it so when the file is selected or drag-and-dropped, the uploader starts uploading automatically. What should I do? my code is:

<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />

<ajaxToolkit:AjaxFileUpload ID="AjaxFileUploader"  OnUploadComplete="AjaxFileUploader_UploadComplete" runat="server"  />

protected void AjaxFileUploader_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
    AjaxFileUploader.SaveAs(MapPath("~/UploadedFiles/" + e.FileName));
}

Answer 1

Let your Upload component to use the class "FileAttachmentUpload" then use the below jQuery.

$(".FileAttachmentUpload").change(function () {
  $(".FileAttachmentUpload .ajax__fileupload_uploadbutton").click();
});

$(".ajax__fileupload_dropzone").on('drop', function () {
  $(".ajax__fileupload_uploadbutton").click();
});