Since few days i m trying to implement multiple file upload with drag and drop interface. I have searched a lot and at last found my exact requirement from http://www.dropzonejs.com/
I tried same steps from above site. but, I am unable to implement this dropzone functionality in my aspx page.
Assuming you are using Web Forms, you need to implement a page that reads the posted file data and saves it to file.
Example .ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Mvc4Application_Basic.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.js"></script>
<link href="http://www.dropzonejs.com/css/general.css?v=7" rel="stylesheet" />
</head>
<body>
<form id="frmMain" runat="server" class="dropzone">
<div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
</body>
</html>
Example code-behind
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
foreach (string s in Request.Files)
{
HttpPostedFile file = Request.Files[s];
int fileSizeInBytes = file.ContentLength;
string fileName = Request.Headers["X-File-Name"];
string fileExtension = "";
if (!string.IsNullOrEmpty(fileName))
fileExtension = Path.GetExtension(fileName);
// IMPORTANT! Make sure to validate uploaded file contents, size, etc. to prevent scripts being uploaded into your web app directory
string savedFileName = Path.Combine(@"C:\Temp\", Guid.NewGuid().ToString() + fileExtension);
file.SaveAs(savedFileName);
}
}
}
If you are using MVC, see this https://stackoverflow.com/a/15670033/2288997
