Click here to Skip to main content
Licence CPOL
First Posted 27 Sep 2010
Views 180,650
Downloads 15,534
Bookmarked 292 times

ASP.NET File Upload with Progress Bar

By | 27 Sep 2010 | Article
File upload widget that will display real time file upload progressbar

Introduction

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

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)

PageStructure.png

Upload Engine structure (UploadEngine.aspx)

UploadEngineStructure_.png

Page execution flow

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

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. PageExecutionFlow_2.png

  4. Display real time progress

    PageExecutionFlow_3.png

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

    PageExecutionFlow_4.png

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

      ProcessesExecution_1_.png

    • Default

      ProcessesExecution_2.png

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

    Downloading.png

  8. Following functionality is also available in Grid:

    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:

    Browser.jpg

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.

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)

About the Author

Sunasara Imdadhusen

Software Developer (Senior)
Verve Systems Ahmedabad-Gujarat
India India

Member

Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

sunaSaRa Imdadhusen
+91 99095 44184
 
AWARDS:
  1. 1st Best Asp.Net article of SEP 2010
  2. 2nd Best Asp.Net article of MAY 2011
 
Read More Articles...

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralMy vote of 3 Pinmemberhieuokua5:52 24 May '12  
GeneralMy vote of 5 Pinmemberarturogf2113:58 23 May '12  
QuestionProgress bar moves fast Pinmemberzabira2:21 17 May '12  
QuestionRequest PinmemberMember 192467018:05 9 May '12  
GeneralMy vote of 5 Pinmembersravani.v21:35 4 May '12  
QuestionSession State Pinmemberbmholt4:45 3 May '12  
QuestionDownload is broken PinmemberPaul Gorbas5:49 26 Apr '12  
AnswerRe: Download is broken Pinmemberbrother.gabriel10:21 29 Apr '12  
QuestionCan't download the source [modified] PinmemberMember 888156221:45 24 Apr '12  
GeneralMy vote of 5 PinmemberArminss2:29 13 Apr '12  
Questionvvvvvvvvvvvvvvvvvvvvb.net version??????????? Pinmemberadel111113:20 31 Mar '12  
AnswerRe: vvvvvvvvvvvvvvvvvvvvb.net version??????????? PinmemberSunasara Imdadhusen18:31 1 Apr '12  
QuestionThis will double the upload time Pinmembermoqane10:47 19 Mar '12  
GeneralRe: This will double the upload time [modified] Pinmemberbrother.gabriel10:26 29 Apr '12  
QuestionPlease can you help me with this. PinmemberMember 33579955:20 11 Mar '12  
AnswerRe: Please can you help me with this. Pinmemberjdeep840:03 3 Apr '12  
GeneralMy vote of 5 Pinmemberclaudiacol2:07 11 Mar '12  
QuestionProblem with updating ui Pinmemberkapildhir22:42 10 Mar '12  
Questionmultiple files upload Pinmembershirley Doan17:54 5 Mar '12  
QuestionIssuw with IIS PinmemberVinaySonal18:35 2 Mar '12  
QuestionRe: Issuw with IIS PinmemberSunasara Imdadhusen20:21 2 Mar '12  
Questionsome questions [modified] Pinmemberdermassen8:21 27 Feb '12  
QuestionProblem with initializing upload [modified] Pinmembershahnaitik23:25 27 Dec '11  
Questionhow to get the file name whic is uploaded Pinmemberdeveloperit0:47 26 Dec '11  
AnswerRe: how to get the file name whic is uploaded PinmemberSunasara Imdadhusen23:11 23 Feb '12  

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.

Permalink | Advertise | Privacy | Mobile
Web02 | 2.5.120528.1 | Last Updated 28 Sep 2010
Article Copyright 2010 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid