Click here to Skip to main content
15,846,571 members
Articles / Web Development / HTML

ASP.NET File Upload with Progress Bar

Rate me:
Please Sign up or sign in to vote.
4.90/5 (252 votes)
20 Jul 2012CPOL2 min read 4.9M   68.3K   442   357
File upload widget that will display real time file upload progressbar


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



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)


Upload Engine structure (UploadEngine.aspx)


Page execution flow

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

  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


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


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


    • Default


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


  8. Following functionality is also available in Grid:


  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:


    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!
                       //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.  


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.  


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Technical Lead Infostretch Ahmedabad-Gujarat
India India
Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

sunaSaRa Imdadhusen


  1. 2nd Best Mobile Article of January 2015
  2. 3rd Best Web Dev Article of May 2014
  3. 2nd Best Asp.Net article of MAY 2011
  4. 1st Best Asp.Net article of SEP 2010

Read More Articles...

Comments and Discussions

AnswerRe: VB.NET version ? Pin
Sunasara Imdadhusen11-Apr-11 1:29
professionalSunasara Imdadhusen11-Apr-11 1:29 
AnswerRe: VB.NET version ? Pin
Sunasara Imdadhusen11-Apr-11 1:31
professionalSunasara Imdadhusen11-Apr-11 1:31 
GeneralRe: VB.NET version ? Pin
mark196119-Apr-11 23:53
mark196119-Apr-11 23:53 
GeneralRe: VB.NET version ? Pin
mark196119-Apr-11 23:55
mark196119-Apr-11 23:55 
GeneralRe: VB.NET version ? Pin
Sunasara Imdadhusen27-Apr-11 20:11
professionalSunasara Imdadhusen27-Apr-11 20:11 
GeneralProblem with MasterPage Pin
Passarelli4-Apr-11 13:41
Passarelli4-Apr-11 13:41 
GeneralRe: Problem with MasterPage Pin
Sunasara Imdadhusen6-Jul-11 20:52
professionalSunasara Imdadhusen6-Jul-11 20:52 
GeneralRe: Problem with MasterPage Pin
TheCodeVB15-Jul-11 10:33
TheCodeVB15-Jul-11 10:33 
I get the same problem with masterpage.
When we use masterpage we can't use forms.
And how UploadEngine.aspx uses form an error is generated on Click "Upload".
GeneralMy vote of 4 Pin
Sunnyonfire4-Apr-11 9:19
Sunnyonfire4-Apr-11 9:19 
GeneralRe: My vote of 4 Pin
Sunasara Imdadhusen6-Jul-11 20:53
professionalSunasara Imdadhusen6-Jul-11 20:53 
GeneralMy vote of 5 Pin
Tu Xuan Nguyen31-Mar-11 22:47
Tu Xuan Nguyen31-Mar-11 22:47 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen11-Apr-11 1:57
professionalSunasara Imdadhusen11-Apr-11 1:57 
GeneralMy vote of 1 Pin
Member 437224013-Mar-11 6:36
Member 437224013-Mar-11 6:36 
GeneralRe: My vote of 1 Pin
taichitof24-Mar-11 0:04
taichitof24-Mar-11 0:04 
GeneralMy vote of 3 Pin
Member 146403813-Mar-11 6:28
Member 146403813-Mar-11 6:28 
GeneralRe: My vote of 3 Pin
Sunasara Imdadhusen11-Apr-11 1:58
professionalSunasara Imdadhusen11-Apr-11 1:58 
GeneralMy vote of 1 Pin
taichitof11-Mar-11 5:02
taichitof11-Mar-11 5:02 
GeneralRe: My vote of 1 Pin
Sunasara Imdadhusen6-Jul-11 21:01
professionalSunasara Imdadhusen6-Jul-11 21:01 
GeneralMY Vote of 1: It is NOT RealTime Pin
taichitof11-Mar-11 5:01
taichitof11-Mar-11 5:01 
QuestionVB Version? Pin
larryo38-Mar-11 10:48
larryo38-Mar-11 10:48 
AnswerRe: VB Version? Pin
Sunasara Imdadhusen11-Apr-11 1:59
professionalSunasara Imdadhusen11-Apr-11 1:59 
QuestionCan you Help me? Pin
Fabrizio Leoncini8-Mar-11 6:21
Fabrizio Leoncini8-Mar-11 6:21 
Questionhow to avoid progress bar percent is 100%,but the message still shows 'Initializing upload ...' when upload lage file [modified] Pin
yhfcn27-Feb-11 6:55
yhfcn27-Feb-11 6:55 
GeneralUploading larg file not working Pin
Twister8622-Feb-11 6:11
Twister8622-Feb-11 6:11 
GeneralMy vote of 5 Pin
Rajesh Kumar Chekuri13-Feb-11 20:08
Rajesh Kumar Chekuri13-Feb-11 20:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.