Click here to Skip to main content
11,648,094 members (70,212 online)
Click here to Skip to main content

ASP.NET File Upload with Progress Bar

, 20 Jul 2012 CPOL 1.2M 55.4K 428
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 UploadDetailclass
      • Every 500 milliseconds, the PageMethodwill call and display progress of current uploading file with Size and Percentage value
    • Display continuous progress using StartProgressfunction
  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

 
Questionthank you Pin
kazemtnt26-Mar-13 8:35
memberkazemtnt26-Mar-13 8:35 
AnswerRe: thank you Pin
Sunasara Imdadhusen22-Apr-13 0:10
memberSunasara Imdadhusen22-Apr-13 0:10 
QuestionPerfect tutorial Pin
LedZepelin8-Mar-13 5:17
memberLedZepelin8-Mar-13 5:17 
AnswerRe: Perfect tutorial Pin
Sunasara Imdadhusen14-Apr-13 21:28
memberSunasara Imdadhusen14-Apr-13 21:28 
GeneralMy vote of 5 Pin
prashant_8420-Feb-13 22:53
memberprashant_8420-Feb-13 22:53 
QuestionFTP Upload Pin
persilvia14-Feb-13 7:46
memberpersilvia14-Feb-13 7:46 
GeneralMy vote of 3 Pin
Member 950677012-Feb-13 16:47
memberMember 950677012-Feb-13 16:47 
QuestionTanks Pin
Atmahmoud14-Feb-13 9:24
memberAtmahmoud14-Feb-13 9:24 
GeneralMy vote of 5 Pin
Tejas Vaishnav10-Dec-12 17:29
memberTejas Vaishnav10-Dec-12 17:29 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen19-May-13 19:57
professionalSunasara Imdadhusen19-May-13 19:57 
GeneralMy vote of 5 Pin
Member 327776030-Nov-12 21:30
memberMember 327776030-Nov-12 21:30 
GeneralMy vote of 5 Pin
giocos200429-Nov-12 22:01
membergiocos200429-Nov-12 22:01 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen19-May-13 19:58
professionalSunasara Imdadhusen19-May-13 19:58 
QuestionWhy does the progressbar start in a delay ? Pin
judyIsk6-Nov-12 19:46
memberjudyIsk6-Nov-12 19:46 
Hi, thanx for the article! its great!.BUT.... when i tested locally it all looked good. once i tried on the server this is what happens.(this is noticed more with LARGE files) the progressbar gets to 100% and says INITIALIZING Upload..., now nothing happens, seems like the file is beeing uploaded to something(????) then once thats finished(which can take awhile cuz its a large file-300mb) then the progressbar starts working nicely. WHAT IS HAPPENING WHEN I CLICK UPLOAD? HOW CAN I GET THE PROGRESSBAR TO START WORKING FROM THEN? THANX! Judy
AnswerRe: Why does the progressbar start in a delay ? Pin
misiektg17-Nov-12 7:01
membermisiektg17-Nov-12 7:01 
SuggestionRe: Why does the progressbar start in a delay ? Pin
airabyss29-Nov-12 3:47
memberairabyss29-Nov-12 3:47 
BugSorry, but this is not upload progreess... Pin
Dalamar816-Nov-12 7:24
memberDalamar816-Nov-12 7:24 
GeneralMy vote of 5 Pin
pinguit30-Oct-12 17:13
memberpinguit30-Oct-12 17:13 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen19-May-13 19:59
professionalSunasara Imdadhusen19-May-13 19:59 
Questionlimit file size Pin
randydom5-Oct-12 3:32
memberrandydom5-Oct-12 3:32 
QuestionMultiple files Pin
manognya kota4-Oct-12 8:18
membermanognya kota4-Oct-12 8:18 
GeneralMy vote of 5 Pin
Naveen Sylvan25-Sep-12 19:47
memberNaveen Sylvan25-Sep-12 19:47 
Question[My vote of 1] This is deceptive Pin
Wagner Kye25-Sep-12 5:11
memberWagner Kye25-Sep-12 5:11 
GeneralMy vote of 5 Pin
Kneeland23-Sep-12 17:29
memberKneeland23-Sep-12 17:29 
QuestionGet and Save the md5 checksum Pin
randydom23-Sep-12 5:15
memberrandydom23-Sep-12 5:15 
Questionlong time for waiting Pin
usmanrv3-Sep-12 21:34
memberusmanrv3-Sep-12 21:34 
AnswerRe: long time for waiting Pin
Wagner Kye25-Sep-12 5:03
memberWagner Kye25-Sep-12 5:03 
AnswerRe: long time for waiting Pin
ahmed rashed30-Oct-13 22:30
memberahmed rashed30-Oct-13 22:30 
GeneralMy vote of 4 Pin
mrwsd28-Aug-12 1:05
membermrwsd28-Aug-12 1:05 
BugError with MasterPage and UserControl Pin
mrwsd26-Aug-12 18:29
membermrwsd26-Aug-12 18:29 
GeneralRe: Error with MasterPage and UserControl Pin
Nedgod31-Aug-12 2:04
memberNedgod31-Aug-12 2:04 
AnswerRe: Error with MasterPage and UserControl Pin
mrwsd31-Aug-12 5:39
membermrwsd31-Aug-12 5:39 
GeneralRe: Error with MasterPage and UserControl Pin
Nedgod31-Aug-12 8:01
memberNedgod31-Aug-12 8:01 
GeneralRe: Error with MasterPage and UserControl Pin
Member 42570261-Apr-13 3:06
memberMember 42570261-Apr-13 3:06 
QuestionConfiguration upload files larger than 200MB Pin
ePrata23-Aug-12 12:06
memberePrata23-Aug-12 12:06 
AnswerRe: Configuration upload files larger than 200MB Pin
dotted_decimal28-Dec-12 0:14
memberdotted_decimal28-Dec-12 0:14 
Generalmy +5 Pin
Rajesh Biswas28-Jul-12 6:42
memberRajesh Biswas28-Jul-12 6:42 
GeneralDifferentiate uploads based on Project ID Pin
Divicraft27-Jul-12 2:48
memberDivicraft27-Jul-12 2:48 
GeneralMy vote of 5 Pin
saxenaabhi625-Jul-12 19:46
membersaxenaabhi625-Jul-12 19:46 
GeneralMy vote of 5 Pin
Abinash Bishoyi24-Jul-12 3:17
memberAbinash Bishoyi24-Jul-12 3:17 
QuestionGood Utility Component Pin
Suchi Banerjee, Pune24-Jul-12 1:51
memberSuchi Banerjee, Pune24-Jul-12 1:51 
GeneralMy vote of 5 Pin
Member 43771123-Jul-12 20:34
memberMember 43771123-Jul-12 20:34 
GeneralMy vote of 5 Pin
bilal hashmi22-Jul-12 17:47
memberbilal hashmi22-Jul-12 17:47 
GeneralMy vote of 5 Pin
AlluvialDeposit21-Jul-12 2:38
memberAlluvialDeposit21-Jul-12 2:38 
GeneralMy vote of 5 Pin
SoMad20-Jul-12 21:13
memberSoMad20-Jul-12 21:13 
QuestionCode to use to insert files in sql data base Pin
Member 892168420-Jul-12 4:37
memberMember 892168420-Jul-12 4:37 
AnswerRe: Code to use to insert files in sql data base Pin
Sunasara Imdadhusen20-Jul-12 20:16
memberSunasara Imdadhusen20-Jul-12 20:16 
GeneralRe: Code to use to insert files in sql data base Pin
pantered21-Jul-12 15:26
memberpantered21-Jul-12 15:26 
GeneralRe: Code to use to insert files in sql data base Pin
Sunasara Imdadhusen23-Jul-12 2:00
memberSunasara Imdadhusen23-Jul-12 2:00 
GeneralRe: Code to use to insert files in sql data base Pin
pantered23-Jul-12 6:16
memberpantered23-Jul-12 6:16 

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
Web02 | 2.8.150804.4 | Last Updated 21 Jul 2012
Article Copyright 2010 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid