65.9K
CodeProject is changing. Read more.
Home

ASP.NET File Upload with Progress Bar

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.90/5 (242 votes)

Sep 28, 2010

CPOL

2 min read

viewsIcon

4960332

downloadIcon

68372

File upload widget that will display real time file upload progressbar

Introduction 

File upload widget that will display real time file upload progress bar:

FileUploadWithProgrss/Messages.png

Background

This will allow user to upload, download and delete file with classic user interface and without reloading page.

Using the Code

The upload widget includes the following:

  • File Upload interface (Default.aspx)
    • IFRAME (which contains upload engine page UploadEngine.aspx)
    • Upload button (that will allow user to upload file on server)
    • Display statistics for uploading file (Filename, Status, Progress and Transferred Bytes)
    • Grid (that will display list of uploaded files)
    • Hidden field (it will monitor and refresh file list whenever file was successfully uploaded on server)
  • Upload Engine (UploadEngine.aspx)
    • File Upload control

Page Structure (Default.aspx)

FileUploadWithProgrss/PageStructure.png

Upload Engine structure (UploadEngine.aspx)

FileUploadWithProgrss/UploadEngineStructure_.png

Page execution flow

During page loading, it will automatically register click event for Upload button.

FileUploadWithProgrss/PageExecutionFlow_1.png
  1. Choose File to upload
  2. Clicking on Upload button (it will automatically register click event for Upload button)
    • The following function is checking basic validation on client site like
      • File Upload should not be empty
      • File name should be unique
    • Executing (UploadEngine) submit event using JavaScript
    • During execution of (UploadEngine) two processes are executing simultaneously
      • Page will maintain File Upload details in session with the help of UploadDetail class
      • Every 500 milliseconds, the PageMethod will call and display progress of current uploading file with Size and Percentage value
    • Display continuous progress using StartProgress function
  3. FileUploadWithProgrss/PageExecutionFlow_2.png

  4. Display real time progress

    FileUploadWithProgrss/PageExecutionFlow_3.png

  5. Update message based on result, result may from following:
    Success Information Warning Error

    FileUploadWithProgrss/PageExecutionFlow_4.png

  6. The two processes are executing simultaneously on server side are as follows:
    • Upload Engine

      FileUploadWithProgrss/ProcessesExecution_1_.png

    • Default

      FileUploadWithProgrss/ProcessesExecution_2.png

  7. During file upload processes, the following screen would be appear:

    FileUploadWithProgrss/Downloading.png

  8. Following functionality is also available in Grid:

    FileUploadWithProgrss/Delete_DownloadFile.png

  9. I provided classical look and feel (with CSS) and cross browser compatible script (with JavaScript).
  10. The upload widgets are supported by the following browser:

    FileUploadWithProgrss/Browser.jpg

    UPDATED - 2: 

    I have added three new files for saving file in database. 

    • App_Code  
      1. SaveFile.cs  (Logic for saving file database, Attention: modify only database connection)
      2. Result.cs (this will return status success of failed with description)
    • App_Data 
      1. Script.Sql (Database script for creating Table and Stored Procedure) 

    Modified only one file UploadEngine.aspx.cs

    Please add following code after

    if (this.fileUpload.PostedFile != null && this.fileUpload.PostedFile.ContentLength > 0) 
     //START : Saving File in Database
                    SaveFile saveFileInDB = new SaveFile();
                    saveFileInDB.FileName = this.fileUpload.PostedFile.FileName;
                    saveFileInDB.FileExtension = Path.GetExtension(this.fileUpload.PostedFile.FileName);
                    saveFileInDB.FileContent = this.fileUpload.FileBytes;
                    Result Result = saveFileInDB.SaveFileInDB();
                    if (Result.IsError == false)
                    {
                        //File Save in Database Successfully!
                    }
                    else
                    {
                        //Error in Saving File in Database!
                        //Error: Result.ErrorMessage
                        //InnerException: Result.InnerException
                        //StackTrace: Result.StackTrace
                    }
                    //END : Saving File in Database

Points of Interest 

Now I will try to support multiple files upload feature.  

History  

If you find some issues or bugs with it, just leave a comment or drop me an email. If you make any notes on this, let me know that too so I don't have to redo any of your hard work.

1.                      Initial Upload

2.  21-07-12       Add functionality to uploaded file in Database also

Please provide a "Vote", if this would be helpful.