Search code examples
c#asp.netfile-uploadasyncfileupload

creating multiple asyncFileUpload dynamically

I have a asp .net web form where I am using Ajax asyncFileUpload1, so that when I browse an image it triggers a function and uploads the file.

Now when the file gets uploaded I want to create another asyncFileUpload2 on the same page. But it's not working.

This works

<div id="divform" runat="server">        
</div>

<div id="divform2" runat="server">      
</div>

<asp:Button ID="btnAddFileUpload" runat="server" Text="add" Visible="false" OnClick="btnAddFileUpload_Click" />

 **On Backend server side:**


 protected void btnAddFileUpload_Click(object sender, EventArgs e)
    {
        AsyncFileUpload AsyncFileUpload1 = new AsyncFileUpload();
        AsyncFileUpload1.UploadedComplete += new EventHandler<AsyncFileUploadEventArgs>(AsyncFileUpload1_UploadedComplete);
        divform.Controls.Add(AsyncFileUpload1);

        AsyncFileUpload AsyncFileUpload2 = new AsyncFileUpload();
        AsyncFileUpload2.UploadedComplete += new EventHandler<AsyncFileUploadEventArgs>(AsyncFileUpload2_UploadedComplete);
        divform2.Controls.Add(AsyncFileUpload2);
    }

But I don't want in this way, so I removed Add button and on page load, I dynamically created first AsyncFilepUpload1 button. that worked. And once I browse a file, after it's upload another AsyncFileUpload2 should be created. But file gets uploaded without creating the fileUpload2 button and code does not throw any error.

This doesn't work

<div id="divform" runat="server">        
</div>

<div id="divform2" runat="server">      
</div>

**On backend server side**

protected void Page_Load(object sender, EventArgs e)
    {
        
        AsyncFileUpload AsyncFileUpload1 = new AsyncFileUpload();
        AsyncFileUpload1.UploadedComplete += new EventHandler<AsyncFileUploadEventArgs>(AsyncFileUpload1_UploadedComplete);
        divform.Controls.Add(AsyncFileUpload1);
    }

void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
    {            
        string filename = System.IO.Path.GetFileName(e.FileName);
        string savePath = MapPath("Upload/" + filename + DateTime.Now.ToString("MM_dd_yyyy_HH_mm"));            
        ((AsyncFileUpload)sender).SaveAs(savePath);

        AsyncFileUpload AsyncFileUpload2 = new AsyncFileUpload();
        AsyncFileUpload2.UploadedComplete += new EventHandler<AsyncFileUploadEventArgs>(AsyncFileUpload2_UploadedComplete);
        divform2.Controls.Add(AsyncFileUpload2);
    }
Solution

  • Well, why not use the one same up-load control?

    And since you gone to the HUGE step, leap, jump and were willing to make the effort to adopt the ajaxtool kit?

    Then why not using the AjaxfileUploader in place of the AsyncFileUpload ?

    It allows 1 or 20 files. It didsplays a nice list of files. Allows the user to EASY add more files.

    Allows the user to REMOVE files from the up-load que.

    All in all, it is VERY but BEYOND very hard to make a case that you would need additonal, or even two up-loaders on the same page.

    Drop in the AjaxFileUp-load, and use it:

    So, I built a page like this :

    enter image description here

    So, not only do you get the hot zone (drop files here), but you are free to select more files - 1 or 10 or 20. You thus get a nice looking que of files, and then can up-load them.

    It makes VERY little sense to thus have MORE then one file up-load control on the page.

    Let them up-load 5 or 2 or 20 files. You can then present a list of files for the user after they up-load

    So, provide a tab or a place to up-load files - they can up-load some more if they want - but again, fail to see how or why MORE then one file up-load control system is required? Let them view their list of files, and if they want to up-load some more files - let them do that also. But all of that type of operation should be easy, and certainly does not require more then one up-load control system on the given page.