[RESOLVED]FileUpload With Progress

Hello,

I"m trying to upload a file while showing it’s progress.  The file uploads correctly but I can’t see to get the progress to show.  Any help would be greatly appreciated.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="BlogImages.aspx.cs" Inherits="Site_Admin.BlogImages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="SiteHead" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="SiteContent" runat="server">
 <script type="text/javascript">
     function SetProgressBarProgressAmount(progress) {
         var progressBarId = 'progressBar';
         var percentageId = 'percentage';
         progressAmount = progress + 'px';
         percentageAmount = progress + '%';

         var progressDiv = document.getElementById(progressBarId);
         var percentageDiv = document.getElementById(percentageId);
         progressDiv.style.width = progressAmount;
         percentageDiv.innerHTML = "<p>" + percentageAmount + "</p>";
         alert("I am an alert box!!!!");
     }    
     function chooseFile() {
         document.getElementById("<%= FileUpload1.ClientID %>").click();
     }

    </script>
    <div style="height: 0px; overflow: hidden">
        <asp:FileUpload ID="FileUpload1" runat="server" />
    </div>
    <div class="form_settings">
                <div style="border:2px solid" id="progressBar" runat="server">&nbsp;sdfsdf</div>
                <div style="border:2px solid" id="percentage" runat="server">&nbsp;sfsdf</div>
                <hr />
                <input class="submit" type="submit" id="btnBack" runat="server" value="Back" onserverclick="btnBack_Click" />
                <input class="submit" type="submit" id="btnUpload" runat="server" value="Upload" onserverclick="btnUpload_Click" onclick="chooseFile();" />                
        <asp:Table runat="server" ID="ImagesTable">
        </asp:Table>
    </div>
</asp:Content>

///C# Code

        public void setProgressBar(string ProgressAmount)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript", "AnotherFunction();", true);

            StringBuilder sb = new StringBuilder();
            Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript", "SetProgressBarProgressAmount('" + ProgressAmount + "')", true);
        }

        public void DownloadTheFileToServer(HttpPostedFile file, int id)
        {
            Stream stream = null;
            FileStream fs = null;

            try
            {
                string strFileName = System.IO.Path.GetFileName(file.FileName);
                int contentLength = file.ContentLength;
                stream = file.InputStream;
                long totalUploadSize = stream.Length;
                int bufferSize = 0;
                //less than 1kB
                if (totalUploadSize <= 1024)
                {
                    bufferSize = 1024;
                }
                //less than 4kB but more than 1kB
                else if (bufferSize <= 4096)
                {
                    bufferSize = 4096;
                }
                //less than 8Kb
                else if (bufferSize <= 8192)
                {
                    bufferSize = 8192;
                }
                else
                {
                    bufferSize = 16384;
                }

                byte[] b = new byte[1024];
                int tripDownloadSize = 0;
                long totalDownloadedSize = 0;
                float Percentage = 0;
                string fileStoreLocation = Server.MapPath("~/Site_Content/Images/Source/");
                fs = new FileStream(fileStoreLocation + strFileName, FileMode.Append);

                //Uplaods 8Kb at a time
                while ((tripDownloadSize = stream.Read(b, 0, 1024)) > 0)
                {
                    fs.Write(b, 0, tripDownloadSize);
                    totalDownloadedSize += tripDownloadSize;
                    Percentage = (int)(totalDownloadedSize * 100) / totalUploadSize;
                    setProgressBar(Percentage.ToString());
                    System.Threading.Thread.Sleep(100);
                }
            }
            catch (Exception objException)
            {
                throw objException;
            }
            finally
            {
                if (stream != null)
                {
                    stream.Close();
                    stream.Dispose();
                }
                if (fs != null)
                {
                    fs.Close();
                    fs.Dispose();
                }
            }
        }

        protected void btnUpload_Click(object sender, EventArgs e)
        {
            if (FileUpload1.HasFile)
            {
                string dir = Server.MapPath("~/Site_Content/Images/");
                string file = DateTime.Now.ToString("MMddyyHHmmss");
                string ext = Path.GetExtension(FileUpload1.FileName);

                string SourceFile = Path.Combine(dir + "/Source/", FileUpload1.FileName);
                string OrigFile = Path.Combine(dir, file + ext);
                string OrigURL = "Site_Content/Images/" + file + ext;
                string ThumbFile = Path.Combine(dir, file + "_T" + ext);
                string ThumbURL = "Site_Content/Images/" + file + "_T" + ext;

                    DownloadTheFileToServer(FileUpload1.PostedFile, 0);

Hi JBryanB,

Thanks for your post.

Based on your description and code provided, I see you want to show the progress of uploading file.

As known that asp.net web form is based on http protocol with request-response communication model.

When you click the Button, page will do a postback and form post file stream to server side. Then page UI will not

be changed before server side behind code executes completed. So below method will not work.

JBryanB

public void setProgressBar(string ProgressAmount) { Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript", "AnotherFunction();", true); StringBuilder sb = new StringBuilder(); Page.ClientScript.RegisterStartupScript(this.GetType(), "myScript",
"SetProgressBarProgressAmount(‘" + ProgressAmount + "’)", true); }

For how to show progress of uploading file, we usually do it in the client side (using javascript) please take a look at below:

http://www.codeproject.com/Articles/113418/ASP-NET-File-Upload-with-Progress-Bar

http://www.codeproject.com/Articles/26668/Showing-progress-bar-while-uploading-a-file-in-an

Thanks.

Best Regards

Hey,

Thanks for the reply.  That second example really cleared things up for me.

Leave a Reply