File upload using jQuery and ASP.NET Generic Handler - is this possible?

Question

I am trying to solve a small problem. I created an entire ASP.NET web application using mostly the client side (jQuery / JavaScript). I use generic handlers to do lazy data loading, as well as auto-complete, etc.

One of the requirements is that one page must be able to upload a file, as well as display meta-information about uploadead files.

I am also wondering if there is a way to fully download a file from jQuery / JavaScript. I researched whole plugins, but they all rely on having a php backend.

My thought was to create a message:

$(function(){ $('#submit').live('click', function(event){ $.post('/SomeOtherHandler.ashx', //can be '/someotherpage.aspx' { filename: $('#fileUpload').val(), timestamp: (new Date()).toString() }, function(data){ //do something if the post is successful. }); }); }); 

Will this work? I know that if you include the json object { filename: value, timestamp: value } , it will appear in the HttpContext.Request.Params collection, where I can read it without any problems.

The problem is that I do not know how this will work, since the FileUpload html control only saves the file name in its value. So I would send a string to my server with a file name, not an array of bytes.

Any thoughts on this would be greatly appreciated!

Answer 1

I use the uploadify plugin (http://www.uploadify.com/) - as Jeremy said, this is not in javascript - this is not possible. He flares up. It is very easy to install.

 $('#file_upload').uploadify({ 'uploader' : '/uploadify/uploadify.swf', 'script' : '/uploadify/uploadify.ashx', 'cancelImg' : '/uploadify/cancel.png', 'folder' : '/uploads', 'auto' : true, 'fileExt': '*.xls;*.xlsx;*.csv', 'buttonText': 'Select your file', 'onError' : function (event,ID,fileObj,errorObj) { alert(errorObj.type + ' Error: ' + errorObj.info); }, 'onComplete' : function(event, ID, fileObj, response, data) { var obj = jQuery.parseJSON(response); if (obj.error != "" & obj.errror != null) { lblTable.html("error : " + obj.error); } else { lblTable.html(obj.table); lblEditData.show(); lblTable.hide(); } } }); 

And on uploadify.ashx:

 public class uploadify : IHttpHandler { public void ProcessRequest(HttpContext context) { System.Web.HttpPostedFile file = context.Request.Files["Filedata"]; //Check extension string extension = ""; try { extension = file.FileName.Split('.')[file.FileName.Split('.').Length - 1]; if (extension != "xls" & extension != "xlsx" & extension != "csv") throw new Exception("Error of the extension"); } catch { context.Response.Write("{\"error\",\"Error with the extension of the file\""); } string linkFile = System.Web.HttpContext.Current.Server.MapPath("~") + "uploads" + "\\" + DateTime.Now.ToString("yyMMddHHmm") + APIReportPro.DocumentPDF.RandomString(4) + "." + extension; file.SaveAs(linkFile); ...etc... 

This is the nicest solution I have found for asp.net

Answer 2

You have what comes down to three parameters when uploading files to the server. You can use your own HTML, Flash, or Java file upload functions. Javascript cannot upload a file to the server; it can only decorate the built-in html functions. With that said, I can only assume that you are trying to simulate ajax as a download function. If so, there is a way to upload files using an iframe, which will look like you are using ajax.

You will create a form

 <form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.aspx"> <input name="file" id="file" size="27" type="file" /><br /> <input type="submit" name="action" value="Upload" /><br /> <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> </form> 

This form uses an iframe to publish the file, which will cause the main page to never refresh. You can enable jquery to handle the response, which returns an iframe and processes the user information.

If this is not the part of the equation that you were looking for, feel free to comment and specify what exactly you want to perform.

Answer 3

If you can determine which browsers your application is accessible to (for example, this is an internal business application), it is worth checking out the new File API , which is part of the HTML5 technology stack, which are starting to appear in recent browsers. This gives you direct access to files through client-side Javascript without having to publish the file to the server.

If your application is open, you can still use the File API, but you need to check for support in your code and apply some kind (for example, Uploadify ) for users with older browsers.

More about API files here and here among other places.

Answer 4

I am sure this is not possible; if this is then a big security hole - Javascript will not be able to get bytes from the user's hard drive.

So, you are stuck using your own input type = file or using existing desktop bytes, such as Flash. Several popular users use this method ... my favorite Uploadify . Take a look at this and see if it suits your needs.

NTN.

Answer 5

I implemented an ASP.NET handler to upload a file using Valums ajax Upload control. Here you can check the solution. You can also upload a large file. This handler supports IE, FF, and Chrome. You can also drag and drop multiple files from FF and Chrome (HTML 5)

http://ciintelligence.blogspot.com/2011/05/aspnet-server-side-handler-for-valums.html

Answer 6

Using jquery you can do something like:

 <input type="file" name="file" id="file1" runat="server" /> $("#<%=file1.ClientID%>").change(function () { //Do stuff $(this).upload('youHandler.ashx', function (res) { //do stuff on success } } 

Now on yourHandler.ashx you can do something like this:

 public void ProcessRequest(HttpContext context) { if (context.Request.Files.Count > 0) { var fileCount = context.Request.Files.Count; var fileStram = var file = context.Request.Files[0].InputStream; //Do whatever you want } }