Click here to Skip to main content
11,490,973 members (72,157 online)
Click here to Skip to main content

ASP.NET Server Side Handler for HTML5 Valums Ajax file Upload

, 27 May 2011 CPOL 52.8K 5.2K 29
Rate this:
Please Sign up or sign in to vote.
Implementation of ASP.NET handler for Valums ajax upload; A HTML 5 file uploader supports multiple file upload with progress bar, drag-and-drop

Introduction

This Ajax uploader uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere. You can also see PHP demo in Valums site at http://valums.com/ajax-upload/.

AjaxUpload.JPG

Background

The current implementation has server side handler for Java, PHP and Perl. But ASP.NET handler does not exist. Here, I have implemented an ASP.NET handler for Ajax file upload that supports Internet Explorer, Firefox and Chrome. 

Using the Code

The problem is that Internet Explorer uses context.Request.Files[] for sending file to server. But Firefox and Chrome use Context.Request.InputStream. So in handler, you need to check both for reading stream.

For Firefox and Chrome, you get fileName from header like:

String filename = HttpContext.Current.Request.Headers["X-File-Name"];

Code that works in Firefox and Chrome is as follows:

//This works for Firefox and Chrome.
Stream inputStream = 
HttpContext.Current.Request.InputStream;<br />FileStream fileStream = new 
FileStream(mapPath + "\\" + filename, 
FileMode.OpenOrCreate);inputStream.CopyTo(fileStream);fileStream.Close();

context.Response.Write("{success:true, name:\"" + filename + "\", path:\"" + 
path + "/" + filename + "\"}");

But for Internet Explorer, you need to use:

HttpPostedFile uploadedfile = context.Request.Files[0];

Code that works for Internet Explorer browser is:

HttpPostedFile uploadedfile = context.Request.Files[0];
 filename = uploadedfile.FileName;
uploadedfile.SaveAs(mapPath + "\\" + filename);
 context.Response.Write("{success:true, name:\"" + filename + "\", path:\"" + 
path + "/" + filename + "\"}");

Here the response is sent as JSON string and you will get JSON object as response. You need to send {success:true} to make Ajax upload understand that file upload is successful, otherwise you can send false

History

  • 27th May, 2011: Initial post

License

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

Share

About the Author

Syed BASHAR
Software Developer
Bangladesh Bangladesh
Name SYED MD. ABUL BASHAR
Email ID: miltoncse00@gmail.com

I am now working as software engineer in Malaysia. I am from Bangladesh and I have completed my B.Sc (Engg.) in CSE from Rajshahi University of Engineering and Technology (RUET).I spend much time in learning latest technology.

My LinkedIn Profile : http://bd.linkedin.com/in/miltoncse00[^]

My blog :http://ciintelligence.blogspot.com/[^]

Comments and Discussions

 
Questionphoto.jpg 200 Kb failed Pin
NDOGN6-Aug-13 1:13
memberNDOGN6-Aug-13 1:13 
QuestionIE Crashes Pin
Farnaz_Farnaz18-Apr-13 6:33
memberFarnaz_Farnaz18-Apr-13 6:33 
QuestionIs it possible to select mutiple files at the same time [modified] Pin
Travelthrprog9-Apr-13 5:32
memberTravelthrprog9-Apr-13 5:32 
Questionit runs differently in IE9 Pin
Member 33679062-Apr-13 21:52
memberMember 33679062-Apr-13 21:52 
Questionupload successfully but.... Pin
Alenty18-Oct-12 3:22
memberAlenty18-Oct-12 3:22 
GeneralMy vote of 5 Pin
NoName_ark10-May-12 9:04
memberNoName_ark10-May-12 9:04 
BugFix for IE - invalid path Pin
Member 86106163-May-12 4:47
memberMember 86106163-May-12 4:47 
Questioni con't run the project Pin
senthilkumarpsk8-Mar-12 3:25
membersenthilkumarpsk8-Mar-12 3:25 
AnswerRe: i can't run the project Pin
pimpers14-Sep-12 3:47
memberpimpers14-Sep-12 3:47 
GeneralMy vote of 5 Pin
Member 332085211-Feb-12 6:43
memberMember 332085211-Feb-12 6:43 
QuestionI can't get the filename [modified] Pin
LamJason14-Dec-11 4:57
memberLamJason14-Dec-11 4:57 
AnswerRe: I can't get the filename Pin
Syed BASHAR14-Dec-11 7:28
memberSyed BASHAR14-Dec-11 7:28 
GeneralMy vote of 3 Pin
Jepy21-Oct-11 0:19
memberJepy21-Oct-11 0:19 
QuestionFileName Pin
gooroo.Net19-Oct-11 6:06
membergooroo.Net19-Oct-11 6:06 
QuestionSaving to database Pin
Kiran Volety10-Sep-11 6:24
memberKiran Volety10-Sep-11 6:24 
AnswerRe: Saving to database Pin
Syed BASHAR10-Sep-11 7:02
memberSyed BASHAR10-Sep-11 7:02 
GeneralMy vote of 5 Pin
Saraf Talukder22-Aug-11 4:20
groupSaraf Talukder22-Aug-11 4:20 
QuestionWorked like a charm... Pin
Member 802384516-Aug-11 20:34
memberMember 802384516-Aug-11 20:34 
Questionfile size & remove button Pin
yefriend27-Jul-11 19:05
memberyefriend27-Jul-11 19:05 
AnswerRe: file size & remove button Pin
Syed BASHAR29-Jul-11 11:02
memberSyed BASHAR29-Jul-11 11:02 
QuestionThanks! Pin
BigJoe71416-Jul-11 11:01
memberBigJoe71416-Jul-11 11:01 
AnswerRe: Thanks! Pin
Member 332085211-Feb-12 6:42
memberMember 332085211-Feb-12 6:42 
Questionfile size Pin
severous260002-Jul-11 6:09
memberseverous260002-Jul-11 6:09 
AnswerRe: file size [modified] Pin
Syed BASHAR7-Aug-11 22:46
memberSyed BASHAR7-Aug-11 22:46 
GeneralRe: file size [modified] Pin
jalalbabaei26-May-12 3:04
memberjalalbabaei26-May-12 3:04 

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.150520.1 | Last Updated 27 May 2011
Article Copyright 2011 by Syed BASHAR
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid