Uploading image using AJAX AsyncFileUpload Control toolkit [VB.NET]

By bryan tugade

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

Source code :

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!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" />
</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>

and in code behind:

Protected Sub AsyncFileUpload2_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload2.UploadedComplete
Dim extension As String = AsyncFileUpload2.ContentType

If extension = "image/pjpeg" Then
Dim savePath As String = HttpContext.Current.Server.MapPath("~/images/" & Path.GetFileName(e.filename))
AsyncFileUpload2.SaveAs(savePath)
Else
Exit Sub
End If

End Sub

Related FAQs

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.
How to use AJAX AsyncFileUpload Control for uploading image and validate if the file is jpeg extension.
Uploading image using AJAX AsyncFileUpload Control toolkit [VB.NET]  (3224 Views)