Click here to Skip to main content
Licence CPOL
First Posted 27 May 2011
Views 17,075
Downloads 2,064
Bookmarked 13 times

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

By | 27 May 2011 | Article
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)

About the Author

Syed BASHAR

Software Developer

Bangladesh Bangladesh

Member

Name SYED MD. ABUL BASHAR
Email ID: miltoncse00@yahoo.com
 
I am now working as software engineer in Bangladesh, my mother land; 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/[^]

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 5 PinmemberNoName_ark8:04 10 May '12  
BugFix for IE - invalid path PinmemberMember 86106163:47 3 May '12  
Questioni con't run the project Pinmembersenthilkumarpsk2:25 8 Mar '12  
GeneralMy vote of 5 PinmemberMember 33208525:43 11 Feb '12  
QuestionI can't get the filename [modified] PinmemberLamJason3:57 14 Dec '11  
AnswerRe: I can't get the filename PinmemberSyed BASHAR6:28 14 Dec '11  
GeneralMy vote of 3 PinmemberJepy23:19 20 Oct '11  
QuestionFileName Pinmembergooroo.Net5:06 19 Oct '11  
QuestionSaving to database PinmemberKiran Volety5:24 10 Sep '11  
AnswerRe: Saving to database PinmemberSyed BASHAR6:02 10 Sep '11  
GeneralMy vote of 5 PingroupSaraf Talukder3:20 22 Aug '11  
QuestionWorked like a charm... PinmemberMember 802384519:34 16 Aug '11  
Questionfile size & remove button Pinmemberyefriend18:05 27 Jul '11  
AnswerRe: file size & remove button PinmemberSyed BASHAR10:02 29 Jul '11  
QuestionThanks! PinmemberBigJoe71410:01 16 Jul '11  
AnswerRe: Thanks! PinmemberMember 33208525:42 11 Feb '12  
Questionfile size Pinmemberseverous260005:09 2 Jul '11  
AnswerRe: file size [modified] PinmemberSyed BASHAR21:46 7 Aug '11  

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
Web04 | 2.5.120517.1 | Last Updated 27 May 2011
Article Copyright 2011 by Syed BASHAR
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid