I'm seeking assistance with a query regarding file uploads on a server using the AjaxFileUpload tool. I specifically want to restrict certain file types from being uploaded, and although there is server-side validation in place, I am looking to validate the file types on the client side.
I attempted to use the AllowedFileTypes method of the upload tool as follows:
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" OnUploadComplete="OnUploadComplete" ThrobberID="Throbber" ClientIDMode="AutoID" AllowedFileTypes="jpg,pdf,docx" />
However, it seems to only allow pdf files to be uploaded while rejecting jpg and docx formats. I'm unsure if this issue is due to a bug within the AjaxFileUpload tool itself.
Are there alternative methods to achieve this? I've implemented some javascript code to handle the file type validation:
var validFilesTypes = ["docx", "jpg", "pdf"];
function ValidateFile() {
var file = document.getElementById("<%=AjaxFileUpload1.ClientID%>");
var label = document.getElementById("<%=lblStatus.ClientID%>");
var path = file.valueOf;
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) {
label.style.color="red";
label.innerHTML="Invalid File. Please upload a File with" +
" extension:\n\n"+validFilesTypes.join(", ");
}
return isValidFile;
}
I have adjusted the AjaxFileUpload configuration according to the script above, but unfortunately, it's not achieving the desired outcome:
<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" OnUploadComplete="OnUploadComplete" OnClientUploadComplete="ValidateFile" ThrobberID="Throbber" ClientIDMode="AutoID" />