Check multiple file upload extension using JavaScript in ASP.Net

kavithav

SOLVED CLOSED ACTIVE ANSWERED
User: kavithav
Posted: on Sep 06, 2017 11:57 PM
Forum: JavaScript
Answer: 2
Views: 9368

Below is my code which checks for -b.doc in my selected files of that particular multiple fileuploader my problem is suppos if i choose 200-c.docx,201-C.docx,202.wma and 203.wma with same order it is saying validformat it is working some times and not working some times.

function checkFileExtension() {
  var chkFile = document.getElementById('<%= filBaseDoc.ClientID %>');
  var label = document.getElementById('<%= lblerrmsg.ClientID%>');
  var myfile = chkFile.value;
 
  if (myfile.indexOf("-c.doc") > 0 || myfile.indexOf("-C.DOC") > 0) {
    label.innerText = "Valid Format";
  }
  else {
    label.innerText = "Invalid Format";
    chkFile.value = "";
  }
}
<asp:FileUpload ID="filBaseDoc" runat="server" multiple="multiple" onchange="javascript:return checkFileExtension();"/>

i tried above code but it is not working when i do it multiple times

Moreover i had even tried with if (myfile.indexOf("-c.doc") != -1 || myfile.indexOf("-C.DOC") > != -1) but if i choose the files in below order it is still saying valid format but it should say invalid format because in the selected files there is an .mp3 file 400-C.doc,401-c.doc,402-C.doc,403.mp3

Download FREE API for Word, Excel and PDF in ASP.Net

AnandM

0 2

Reply
ANSWER
User: AnandM
Replied: on Sep 07, 2017 06:14 AM
Report

Hi kavithav,

The way you have approached for validating the multiples file in javascript is not appropriate as it is good for single file validation and for multiple file uploads you need to do workaround like below.

For clearing the files from control even if one of the files is invalid then you need to create fileupload control dynamically and add it to the next to existing file upload control and attach necessary attributes and events to it and delete existing file upload control.

Refer below sample code and modify it according to your need.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            function checkFileExtension() {
                var fileUpload = document.getElementById('<%= filBaseDoc.ClientID %>');
                var validateFiles = fileUpload.files;
                var label = document.getElementById('<%= lblerrmsg.ClientID%>');
                var id = fileUpload.id;
                var name = fileUpload.name;
                label.innerText = "";
                for (var i = 0; i < validateFiles.length; i++) {
                    var myfile = validateFiles[i].name;
                    if (myfile.indexOf("-c.doc") == -1 && myfile.indexOf("-C.DOC") == -1) {
                        label.innerText = "Invalid Format File " + myfile;
                        fileUpload.value = "";
                        var newFileUpload = document.createElement("INPUT");
                        newFileUpload.type = "FILE";
                        var att = document.createAttribute("multiple");
                        att.value = "multiple";
                        newFileUpload.setAttributeNode(att);
                        newFileUpload.addEventListener("change", checkFileExtension, false);
                        fileUpload.parentNode.insertBefore(newFileUpload, fileUpload.nextSibling);
                        fileUpload.parentNode.removeChild(fileUpload);
                        newFileUpload.id = id;
                        newFileUpload.name = name;
                        break;
                    }
                    else {
                        label.innerText = "Valid Format Files";
                    }
                }
            }
        </script>
        <asp:FileUpload ID="filBaseDoc" runat="server" multiple="multiple" onchange="javascript:return checkFileExtension();" />
        <br />
        <asp:Label ID="lblerrmsg" ForeColor="Red" Font-Bold="true" runat="server" />
    </div>
    </form>
</body>
</html>

ScreenShot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Check multiple file upload extension using JavaScript in ASP.Net

Company

Explore

Follow us

Contact Us