Upload Multiple Files ASP.NET 4.0, Using HTML5 Input File and/or Drop Target If you are using .NET 4.5, it is possible to upload multiple files using the FileUpload control with type = multiple. But what if you are using .NET 4.0? The answer is simple with the HTML5 input element - IF your users are using a browser that supports HTML5. This would be Internet Explorer 10. (not 9 or less) as well as most of the other latest browsers. .NET 4.0 doesn't have a native control that supports the HTML5 multi file upload, so I created my own. Once the site is upgraded to .NET 4.5, this control can be replaced by the .NET FileUpload control. Here's the code for the control. It also includes a helper file to get the byte array from each file, in case you don't want to use the 'Save' or 'Stream' values of the file. (Note: if you don't have IE10 or a latest browser, this control should still function, but will only allow the user to select a single file). >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.UI.HtmlControls; using System.Web; using System.Web.UI.WebControls; namespace MyApplication.Web.Controls { /// <summary> /// .NET 4.0 control similar to "FileUpload", but accepts MULTIPLE files. Only works in browsers that support HTML5. /// In .NET 4.5, you can use the native FileUpload control with type = multiple. /// </summary> public class MultiFileUpload : HtmlInputFile { public MultiFileUpload() : base() { this.Attributes["multiple"] = "multiple"; } /// <summary> /// Comma-separated list of content types to accept by default (user can override this) /// Example: "application/pdf,image/jpeg" /// </summary> public string ContentTypes { set { this.Accept = value; } } /// <summary> /// List of the posted files. /// </summary> public List<HttpPostedFile> PostedFileList { get { if (HttpContext.Current.Request == null) return null; List<HttpPostedFile> ret = new List<HttpPostedFile>(HttpContext.Current.Request.Files.Count); for (int i = 0; i < HttpContext.Current.Request.Files.Count; i++) { ret.Add(HttpContext.Current.Request.Files[i] as HttpPostedFile); } return ret; } } // PostedFiles /// <summary> /// Set the width of the control /// </summary> public Unit Width { set { this.Style["width"] = value.ToString(); } } /// <summary> /// Helper method to get the file bytes from an HttpPostedFile /// </summary> /// <param name="file"></param> /// <returns></returns> public static byte[] GetFileContents(HttpPostedFile file) { byte[] fileBytes = new byte[file.ContentLength]; file.InputStream.Read(fileBytes, 0, file.ContentLength); return fileBytes; } // GetFileContents } // class } // namespace >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Next, how about HTML5 Drag and Drop? It's possible to put a drop target on the same page, and then you can accept EITHER files dropped into the drop target, or uploaded using the above control. I won't get into all the specifics about how to create a drop target - but once you have one, you can use the following javascript on the drop event to trigger a Post response to the .NET page. On the Page_Load event, you can check if HttpContext.Current.Request.Files.Count is > 0. If it is, you know files were either dropped on the page -OR- uploaded using the input file control. Here's how to post the dropped content to the page in a javascript drop handler I've named 'dropHandler'. Note that it is making use of the jquery library, which you'll have to add a reference to in order for this to work. // handle file drop function dropHandler(evt) { evt.stopPropagation(); evt.preventDefault(); var selectedFiles = evt.dataTransfer.files; var formData = new FormData(); for (var i = 0; i < selectedFiles.length; i++) { formData.append(selectedFiles[i].name, selectedFiles[i]); } $.ajax({ type: 'POST', url: document.location, contentType: false, processData: false, data: formData, success: function (data) { document.open(); document.write(data); } }); } // UploadFiles Here's the relevant code in the page load to see if files were dropped or uploaded (OR you can just use the PostedFileList on the above control; it doesn't matter if they were dropped or selected by the input; as long as they are in the post data, it will include them). if (Request.Files.Count > 0) { List<HttpPostedFile> files = new List<HttpPostedFile>(); for (int i = 0; i < Request.Files.Count; i++) { files.Add(Request.Files[i] as HttpPostedFile); } UploadFiles(files); }
Created By: amos 4/8/2013 1:25:44 PM Updated: 4/9/2013 1:11:11 PM
|
|