asp.net：AjaxFileUpload OnUploadComplete事件

Question

I'm working to develop simple Drag& Drop Multiple files uploader using Visual Studio 2013 and AjaxControlToolkit v15.0. I've got the AjaxFileUpload control but I notice that only one file appears as uploaded on the browser

Also, I see that OnUploadComplete event doesn't fire. I test the event by inserting an alert in the event and it does not run also the uploaded file is not shown in the project or database table.

This is my code :

.aspx file

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div  align="center">
        <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server"  MaximumNumberOfFiles="10" OnUploadComplete="File_Upload" Width="500px" Mode="Auto" />
    </div>
</form>

.aspx.cs file

protected void File_Upload(object sender, AjaxFileUploadEventArgs e)
{
    SqlConnection con = new SqlConnection(abc);
    try {
        string filename = Path.GetFileName(e.FileName);
        string strDestPath = Server.MapPath("~/Documents/");

        SqlCommand cmd = new SqlCommand("INSERT INTO upload (name, path) VALUES(@FileName, @FilePath)");

        cmd.Parameters.AddWithValue("@FileName", filename);
        cmd.Parameters.AddWithValue("@FilePath", "Documents/" + filename);

        con.Open();

        cmd.ExecuteNonQuery();
        con.Close();

        //Save file to project
        AjaxFileUpload1.SaveAs(@strDestPath + filename);
    }
    catch (Exception er) 
    { 
        Response.Write("<script language='javascript'> alert(' problem');</script>");   
    }
    finally { con.Close(); }     
}

web.config

<system.web>
    <compilation debug="true" targetFramework="4.5">
        <assemblies>
            <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
            <add assembly="System.Web.Extensions.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </assemblies>
    </compilation>
    <httpHandlers>
        <add verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
    </httpHandlers>
    <httpRuntime targetFramework="4.5"/>
</system.web>

<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
        <add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
    </handlers>
</system.webServer>

Any solution ?

Answer 1

My work around: I created a data attribute named "data-upload-type" on ALL AjaxFileUpload controls and set it to the name of the type (upload type I use to know how to process the files). Then I set up the client call to grab that value and set a cookie with the same value. The cookie IS received on the server side functions and I branch based on the value I receive.

Here is an example: This is my common client start upload: function StartUpload(sender, args) { var t = $(sender._element).attr('data-upload-type'); document.cookie = 'upload-type=' + $(sender._element).attr('data-upload-type') + ';'; } function StartUpload(sender, args) { var t = $(sender._element).attr('data-upload-type'); document.cookie = 'upload-type=' + $(sender._element).attr('data-upload-type') + ';'; } function StartUpload(sender, args) { var t = $(sender._element).attr('data-upload-type'); document.cookie = 'upload-type=' + $(sender._element).attr('data-upload-type') + ';'; } My page code dropping one of the ajaxcontrols: <asp:AjaxFileUpload ID="afuUploader1" runat="server" OnClientUploadStart="StartUpload" OnUploadComplete="UploadComplete" OnClientUploadComplete="UploadComplete" data-upload-type="UploadType2" / >

Then in your server side upload call, simply check Response.Cookies("upload-type"). Works like a charm!