Use case: To upload the file from client system and save the file in Server using File Stream
Implementation: This can be done at the client side by using jQuery with the help of uploadify.js plugin
1. Designing the Page
Drag and drop Fileupload control, hidden Field, also need hyderlink or button control for the upload.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadJs.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Uploadify Example for .NET</title>
<link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />
<script type="text/javascript" src="Scripts/jquery-latest.js"></script>
<script type="text/javascript" src="Scripts/jquery.uploadify.js"></script>
<script type="text/javascript">
$(window).load(
function()
{
$("#<%=fleUpload.ClientID%>").fileUpload(
{
'uploader': 'scripts/uploader.swf',
'cancelImg': 'images/cancel.png',
'buttonText': 'Browse Files',
'script': 'Upload.ashx',
'folder': 'uploads',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': false,
'auto': false,
'onComplete': function(event, queueID, fileObj, response, data) {
document.getElementById('<%=hdnField.ClientID %>').value = response;
}
});
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="hdnField" runat="server" />
<div id="divsd">
<table>
<tr>
<td>
<asp:FileUpload ID="fleUpload" runat="server" /><br />
</td>
<td>
<a id="a1" href="#" onclick="$('#<%=fleUpload.ClientID%>').fileUploadStart()">Upload</a>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
2. Implement the handler.
Notice that we are calling handler upload.ashx at the client side on window.load event, so we need to implement the handler to support , save uploaded file on the server. The following is code for that.
<%@ WebHandler Language="C#" Class="Upload" %>
using System;
using System.Web;
using System.IO;
public class Upload : IHttpHandler
{
UploadToDB Fileupload = new UploadToDB();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Expires = -1;
try
{
HttpPostedFile postedFile = context.Request.Files["Filedata"];
string savepath = "";
string tempPath = "";
tempPath = context.Request["folder"];
//If you prefer to use web.config for folder path, uncomment below line:
//tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];
savepath = context.Server.MapPath(tempPath);
string filename = postedFile.FileName;
if (!Directory.Exists(savepath))
Directory.CreateDirectory(savepath);
postedFile.SaveAs(savepath + @"\" + filename);
Fileupload.UploadToDatabase(savepath + @"\" + filename); // implement logic to upload to database. Save file path in database
context.Response.Write(filename);
context.Response.StatusCode = 200;
}
catch (Exception ex)
{
context.Response.Write("Error: " + ex.Message);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
Handler logic is self explanatory this is normal code to save file in file directory. If the directory do not exists it creates folder and saves the files.
3.Implement class UploadtoDatabase
public class UploadToDB
{
public UploadToDB()
{
//
// TODO: Add constructor logic here
//
}
public int UploadToDatabase(string filename)
{
return Convert.ToInt32(SqlHelper.ExecuteNonQuery(ConfigurationSettings.AppSettings["conString"], "SP_Uplaodfile", new object[] {filename }));
}
}
Thats it . Now our Web page is ready to upload and store the files Note: Make sure that you give write permissions to the Folder on the server. Allow ASP.Net user to access the folder. Do not make the Folder as readonly.