How to restrict files with multiple extension to be uploaded

Question

I am using Kendo uploader to upload files into my application. I have made sure to allow only the extensions defined in my config to be allowed to upload or else to show up an error message. My code looks something like this

var validExtensions = [".pdf", ".doc", ".docx", ".pptx", ".xls", ".xlsx", ".txt"];

$('#uploader').kendoUpload({
  multiple: false,
  select: function (e) {
    if (validExtensions.indexOf(e.files[0].extension.toLowerCase()) <= -1) {
      alert("File type not allowed!");
      e.preventDefault();
      return false;
    }
  }
});

This works fine to accept files of only the given extensions. But there is an issue raised by the security team who are evaluating to avoid files with multiple extensions to be uploaded (e.g. fileName.msi.txt or fileName.exe.doc) should not be allowed.

I know we can split based on . and evaluate but I wanted to know in case we have a cleaner way to achieve this?

Thanks

Answer 1

Unfortunately, you can't determine valid files based on their name only. File names can be named whatever you'd like, so there's no filtering that can't be circumvented with a quick rename.

If you are using HTML 5 though, you can access the MIME type of the selected <input type="file"> element.

For example:

<input type="file" onchange="handleFiles(this.files)">
<script>
function handleFiles(files) {
    var selectedFile = files[0];

    console.log(
        "The selected file has the name "
        + selectedFile.name
        + " and is of the type "
        + selectedFile.type + "."
    );
}
</script>

It won't recognize everything on your list, but you can make sure that, for example, PDF and .txt files are what they say they are.