How to upload large file asynchronously

Question

A user can send an alert to a group of users. The alert will comport a text and (operationally) an attached file. The problem is that, when the file gets bigger, the uploading takes longer and the UI is tied up.

This is what I'd like to do: After posting the form, I want the uploading to be done in the background, using, for instance, a new thread. The idea behind is that the user can keep working while the file is being uploaded.

I've read how threading works, I don't just see how to apply that as Threading is applied in the server-side.

Thanks for pointing me to solutions.

EDIT

I'm using ASP.NET MVC 2.O

Metro? WinForms? WPF? Silverlight? Windows Phone? ASP.Net? MonoTouch? — SLaks, Nov 22 '13 at 19:38
Something like how gmail does it? http://stackoverflow.com/questions/135123/how-can-i-get-gmail-like-file-uploads-for-my-web-app — the_lotus, Nov 22 '13 at 19:49
I think you don't really need multithreading so much as AJAX asynchronus file uploading. — Kemo Sabe, Nov 22 '13 at 20:09
See here: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery — Kemo Sabe, Nov 22 '13 at 20:14
@KemoSabe. Very interesting. The only problem is that I using MVC2, with jquery-1.4.1.js version. I hope, I'll be able to manage that. — Richard77, Nov 22 '13 at 20:22

score 0 · Answer 1 · answered Nov 22 '13 at 23:20

If your talking about ASP.NET, you would first add a ScriptManager from the Toolbox (under AJAX Extensions).

Then add an AsyncFileUpload control (from AjaxToolKit).

This control has an OnClientUploadComplete event in properties. Tie it to a function, for example uploadComplete.

Your ASPX code should look something like:

<head runat="server">
    <title></title>
    <script type = "text/javascript">
        function uploadComplete(sender) {
            $get("<%=Label1.ClientID%>").style.color = "blue";
            $get("<%=Label1.ClientID%>").innerHTML = "Successfully Uploaded";
        }

        function uploadError(sender) {
            $get("<%=Label1.ClientID%>").style.color = "red";
            $get("<%=Label1.ClientID%>").innerHTML = "Upload failed.";
        }
    </script>
</head>

<body>
   <form id="form1" runat="server">
   <asp:Label ID="Label2" runat="server" Text="Asynchronous File Uploading"
       ForeColor="#000066"></asp:Label>
       <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:AsyncFileUpload OnClientUploadError="uploadError"
            OnClientUploadComplete="uploadComplete" runat="server"
            ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
            CompleteBackColor = "White"
            UploadingBackColor="#CCDDEE"  ThrobberID="inProgress"
            OnUploadedComplete = "FileUploadComplete"
          />
        <asp:Image ID="inProgress" runat="server" ImageUrl = "~/inProgress.gif" />
        <br />
       <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </form>
</body>

Your codebehind file (.cs) should look something like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class AjaxUploadFile : System.Web.UI.Page
{

    protected void FileUploadComplete(object sender, EventArgs e)
    {

        string savePath = @"F:\BLOG\Projects\InsertData\UploadedFiles\";
        string filename = AsyncFileUpload1.FileName;

        if (AsyncFileUpload1.HasFile)
        {
            savePath += filename;
            AsyncFileUpload1.SaveAs(savePath);

        }

    }
}

This should give you the async file uploading functionality you want. You can get the AjaxToolKit from http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

How to upload large file asynchronously

EDIT

1 Answers1