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
|
|