Hi,
this is my compelete code for validation type and display image with AsyncFileUplaod
I'd like to upload only png, jpg, gif
I can upload Image and have its preview successfully
and when try to upload another type It prevents and fortunately I can see this message
"Upload a valid file with extension png, jpg, gif."
but Unfortunately
It shows a message box with this errot
Unhandled Exception: this._innerTB is null
what's my mistake?
what's the solution?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 runat="server">
<title>Validation in AsyncFileUpload Example</title>
<script type="text/javascript">
var errorMessage;
window.onload = function () {
errorMessage = $get("<%=lblMesg.ClientID %>").innerHTML;
$get("<%=lblMesg.ClientID %>").innerHTML = "";
AjaxControlToolkit.AsyncFileUpload.prototype._onStart = function () {
var valid = this.raiseUploadStarted(new AjaxControlToolkit.AsyncFileUploadEventArgs(this._inputFile.value, null, null, null));
if (typeof valid == 'undefined') {
valid = true;
}
if (valid) {
valid = Validate(this._inputFile.value);
if (!valid) {
this._innerTB.value = "";
this._innerTB.style.backgroundColor = this._completeBackColor;
}
}
return valid;
}
}
var validFilesTypes = ["png", "jpg", "gif", "jpeg"];
function Validate(path) {
$get("<%=lblMesg.ClientID%>").innerHTML = "";
var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
var isValidFile = false;
for (var i = 0; i < validFilesTypes.length; i++) {
if (ext == validFilesTypes[i]) {
isValidFile = true;
break;
}
}
if (!isValidFile) {
$get("<%=lblMesg.ClientID %>").innerHTML = errorMessage;
}
return isValidFile;
}
function uploadStarted() {
$get("imgDisplay").style.display = "none";
}
function ClientUploadComplete(sender, args) {
var imgDisplay = $get("imgDisplay");
imgDisplay.src = "images/loader.gif";
imgDisplay.style.cssText = "";
var img = new Image();
img.onload = function () {
imgDisplay.style.cssText = "height:100px;width:100px";
imgDisplay.src = img.src;
};
img.src = "<%=ResolveUrl(UploadFolderPath) %>" + args.get_fileName();
$get("<%=lblSuccess.ClientID %>").innerHTML = "File uploaded successfully."
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:AsyncFileUpload runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Traditional" CompleteBackColor="White"
UploadingBackColor="#CCFFFF" ThrobberID="imgLoader" OnClientUploadStarted = "uploadStarted" OnUploadedComplete="FileUploadComplete" OnClientUploadComplete = "ClientUploadComplete" />
<asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/loader.gif" />
<br />
<img id = "imgDisplay" alt="" src="" style = "display:none"/>
<asp:Label ID="lblSuccess" runat="server" style = "color:green" />
<asp:Label ID="lblMesg" runat="server" style = "color:red" Text = "Upload a valid file with extension png, jpg, gif." />
</form>
</body>
</html>
