Uploading image using AJAX AsyncFileUpload Control toolkit in C#

By bryan tugade

How to use AJAX AsyncFileUpload Control for uploading image and validate if the file is jpeg extension.

Source code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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>Untitled Page</title>
<link href="styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ToolkitScriptManager1" />
<script type="text/javascript" language="javascript">
function fillCell(row, cellNumber, text) {
var cell = row.insertCell(cellNumber);
cell.innerHTML = text;
cell.style.borderBottom = cell.style.borderRight = "solid 1px #aaaaff";
}
function addToClientTable(name, text,res) {
var table = document.getElementById("<%= clientSide.ClientID %>");
var row = table.insertRow(0);
fillCell(row, 0, name);
fillCell(row, 1, text);
fillCell(row, 2, res);

}

function uploadError(sender, args) {
addToClientTable(args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>","<img src='images/x.png' alt=''/>");
}
function uploadComplete(sender, args) {
var contentType = args.get_contentType();

var text = args.get_length() + " bytes";
if (contentType == "image/pjpeg") {
addToClientTable(args.get_fileName(), text + " Image uploaded successfully!" , "<img src='images/check.png' alt=''/>");
}
else {
addToClientTable(args.get_fileName(), "<span style='color:red;'>" + "Access is denied! Please select image with jpeg extension!" + "</span>", "<img src='images/x.png' alt=''/>");

}

}

</script>

<div>
</div>


<div>
<div style="background-color: #E9E9E9" >
<div >Upload your Image</div>
Click '<i>Select File</i>' for asynchronous uploading.
<br /><br />
<div>
<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload2" runat="server" OnClientUploadError="uploadError"
CompleteBackColor="#E4E4E4" ThrobberID="myThrobber" UploaderStyle="Modern"
UploadingBackColor="#CCFFFF" Width="400px" OnClientUploadComplete="uploadComplete"
onuploadedcomplete="AsyncFileUpload2_UploadedComplete" />
</div>

<div><strong>Upload Result :</strong></div>
<table><tr><td> <table style="border-collapse: collapse; border-left: solid 1px #aaaaff; border-top: solid 1px #aaaaff;" runat="server" cellpadding="3" id="clientSide" />
</td><td><asp:Label runat="server" ID="myThrobber" style="display:none" ><img align="absmiddle" alt="" src="uploading.gif" /></asp:Label></td></tr></table>

</div>


</form>


</body>
</html>

Code Behind :

using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using System.IO;
public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void AsyncFileUpload2_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
string extension = AsyncFileUpload2.ContentType;

if (extension == "image/pjpeg")
{
string savePath = HttpContext.Current.Server.MapPath("~/images/" + Path.GetFileName(e.filename));
AsyncFileUpload2.
SaveAs(savePath);
}
else
{
return;
}
}
}

Related FAQs

How to use AJAX AsyncFileUpload Control for uploading image and validate if the file is jpeg extension.
We can upload image in our web application using input file html control in VB.NET. By assigning this control to runat=”server”, we can access its attribute in code behind.
Uploading image using AJAX AsyncFileUpload Control toolkit in C#  (3343 Views)