Click here to Skip to main content
11,703,632 members (66,609 online)
Click here to Skip to main content

ASP.NET File Upload with Progress Bar

, 20 Jul 2012 CPOL 1.2M 55.9K 429
Rate this:
Please Sign up or sign in to vote.
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.  

License

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

Share

About the Author

Sunasara Imdadhusen
Software Developer (Senior) 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

AWARDS:
  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...

You may also be interested in...

Comments and Discussions

 
QuestionIs this upload control supports if file size more than 1GB? Pin
Member 1113615812-Feb-15 3:38
memberMember 1113615812-Feb-15 3:38 
AnswerRe: Is this upload control supports if file size more than 1GB? Pin
yxhu7-Jun-15 17:58
memberyxhu7-Jun-15 17:58 
QuestionProject file Pin
Member 1097492622-Jan-15 13:34
memberMember 1097492622-Jan-15 13:34 
GeneralRe: Project file Pin
Sunasara Imdadhusen22-Jan-15 18:02
professionalSunasara Imdadhusen22-Jan-15 18:02 
GeneralRe: Project file Pin
Member 1097492624-Jan-15 8:28
memberMember 1097492624-Jan-15 8:28 
GeneralRe: Project file Pin
Member 1097492626-Jan-15 23:49
memberMember 1097492626-Jan-15 23:49 
AnswerRe: Project file Pin
Sunasara Imdadhusen26-Jan-15 23:55
professionalSunasara Imdadhusen26-Jan-15 23:55 
GeneralRe: Project file Pin
Member 1097492629-Jan-15 2:02
memberMember 1097492629-Jan-15 2:02 
QuestionImage Save Pin
Member 1138695019-Jan-15 16:28
memberMember 1138695019-Jan-15 16:28 
QuestionVery great man! Pin
Ahmad behjati11-Dec-14 1:27
memberAhmad behjati11-Dec-14 1:27 
GeneralRe: Very great man! Pin
Sunasara Imdadhusen11-Dec-14 1:43
professionalSunasara Imdadhusen11-Dec-14 1:43 
QuestionIt doesnt work in server Pin
emreydag16-Nov-14 21:18
memberemreydag16-Nov-14 21:18 
AnswerRe: It doesnt work in server Pin
Sunasara Imdadhusen19-Jan-15 18:23
professionalSunasara Imdadhusen19-Jan-15 18:23 
QuestionAllowMultiple Upload with progress Pin
EnzeroX23-Oct-14 2:46
memberEnzeroX23-Oct-14 2:46 
Questionsynchronous Pin
Member 1111076428-Sep-14 22:48
memberMember 1111076428-Sep-14 22:48 
QuestionThanks Pin
Calle M21-Sep-14 4:16
memberCalle M21-Sep-14 4:16 
AnswerRe: Thanks Pin
Sunasara Imdadhusen21-Sep-14 18:36
professionalSunasara Imdadhusen21-Sep-14 18:36 
GeneralThank you Pin
LeeSung052928-Aug-14 2:46
memberLeeSung052928-Aug-14 2:46 
GeneralRe: Thank you Pin
Sunasara Imdadhusen28-Aug-14 2:51
professionalSunasara Imdadhusen28-Aug-14 2:51 
GeneralMy vote of 1 Pin
Member 808721014-Jun-14 11:40
memberMember 808721014-Jun-14 11:40 
QuestionReg : Session Locks Pin
Bala_Subramaniam11-Jun-14 19:05
memberBala_Subramaniam11-Jun-14 19:05 
AnswerRe: Reg : Session Locks Pin
daveb7715-Jul-15 13:36
memberdaveb7715-Jul-15 13:36 
QuestionUploadDetail Pin
eAuditor6-May-14 21:14
groupeAuditor6-May-14 21:14 
AnswerRe: UploadDetail Pin
Sunasara Imdadhusen6-May-14 21:20
professionalSunasara Imdadhusen6-May-14 21:20 
GeneralRe: UploadDetail Pin
eAuditor6-May-14 23:55
groupeAuditor6-May-14 23:55 
GeneralRe: UploadDetail Pin
Sunasara Imdadhusen7-May-14 0:35
professionalSunasara Imdadhusen7-May-14 0:35 
GeneralRe: UploadDetail Pin
eAuditor7-May-14 1:14
groupeAuditor7-May-14 1:14 
QuestionUploadEngine Getting server error and restarting Pin
bayvirus2-May-14 22:42
memberbayvirus2-May-14 22:42 
AnswerRe: UploadEngine Getting server error and restarting Pin
bayvirus2-May-14 22:47
memberbayvirus2-May-14 22:47 
Generalthanks Pin
Member 107263789-Apr-14 21:01
memberMember 107263789-Apr-14 21:01 
GeneralRe: thanks Pin
Sunasara Imdadhusen9-Apr-14 21:14
memberSunasara Imdadhusen9-Apr-14 21:14 
GeneralVote 5 Pin
JoseGpe0611-Mar-14 8:59
memberJoseGpe0611-Mar-14 8:59 
GeneralRe: Vote 5 Pin
Sunasara Imdadhusen9-Apr-14 21:15
memberSunasara Imdadhusen9-Apr-14 21:15 
QuestionThe Best Sample Pin
JoseGpe0611-Mar-14 8:57
memberJoseGpe0611-Mar-14 8:57 
AnswerRe: The Best Sample Pin
Sunasara Imdadhusen9-Apr-14 21:15
memberSunasara Imdadhusen9-Apr-14 21:15 
General[My vote of 1] misleading article Pin
mario_finsoft6-Feb-14 3:13
membermario_finsoft6-Feb-14 3:13 
GeneralRe: [My vote of 1] misleading article Pin
Sunasara Imdadhusen22-Apr-14 2:34
professionalSunasara Imdadhusen22-Apr-14 2:34 
QuestionLong Time 100% Pin
ahmed rashed30-Oct-13 22:32
memberahmed rashed30-Oct-13 22:32 
AnswerRe: Long Time 100% Pin
Sunasara Imdadhusen22-Apr-14 2:35
professionalSunasara Imdadhusen22-Apr-14 2:35 
BugWrong file being attached Pin
larryo329-Oct-13 4:17
memberlarryo329-Oct-13 4:17 
GeneralRe: Wrong file being attached Pin
larryo314-Nov-13 9:59
memberlarryo314-Nov-13 9:59 
GeneralRe: Wrong file being attached Pin
Sunasara Imdadhusen22-Apr-14 2:37
professionalSunasara Imdadhusen22-Apr-14 2:37 
QuestionPLEASE READ THIS MASTER Pin
Zhero Yoshiko Shizuka30-Sep-13 1:19
memberZhero Yoshiko Shizuka30-Sep-13 1:19 
AnswerRe: PLEASE READ THIS MASTER Pin
Sunasara Imdadhusen22-Apr-14 2:39
professionalSunasara Imdadhusen22-Apr-14 2:39 
QuestionHow does it work? Confused. Pin
Ilshat N. Aliev6-Sep-13 3:07
memberIlshat N. Aliev6-Sep-13 3:07 
AnswerRe: How does it work? Confused. Pin
Ilshat N. Aliev6-Sep-13 3:13
memberIlshat N. Aliev6-Sep-13 3:13 
QuestionAccess denied on Internet Explorer Pin
Daniel Oliveras22-Aug-13 6:53
memberDaniel Oliveras22-Aug-13 6:53 
QuestionUpgrade to vs2012 Pin
Ehsan yazdani rad16-Aug-13 20:31
memberEhsan yazdani rad16-Aug-13 20:31 
AnswerRe: Upgrade to vs2012 Pin
Sunasara Imdadhusen22-Apr-14 2:40
professionalSunasara Imdadhusen22-Apr-14 2:40 
QuestionUpload to SharePoint 2010 Pin
Vikram Stephen7-Aug-13 0:52
memberVikram Stephen7-Aug-13 0:52 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150819.1 | Last Updated 21 Jul 2012
Article Copyright 2010 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid