Limit the types of files users can upload

Jake Howlett, 19 October 2000

Category: JavaScript; Keywords: File upload type

The following JavaScript function can be used to validate that the type of file that a user tries to upload is of a certain format. It does this by checking that the files extention (eg .html) is in an array of allowed extensions that is passed to the function as an argument.
<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') :
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

You can test it using the file upload below which will only accept image files that end in either .gif, .jpg or .png:



You can then call the function from an event like the onClick of the above button, which looks like:

onClick="TestFileType(this.form.uploadfile.value, ['gif', 'jpg', 'png', 'jpeg']);"


or, alternatively, you could put it in the onChange event of the file upload element.

Note that the above example assumes that you know the "name" attribute of the file upload element. In domino R5 you can do this to an upload by putting a name in its HTML attributes. In R4 you cannot do this so you can either create the upload yourself by using the following pass-thru html

<input type="file" name="uploadfile">

Otherwise you would need to loop through all elements on the form looking for any input of type "file" and then validating this. This method is demonstrated here.

Note: This is not entirely foolproof as people can easily change the extension of a file before uploading it, or do some other trickery, as in the case of the "LoveBug" virus.

Copyright © 2000 - 2024 Jake Howlett of Rockall Design ltd. This article was printed from codestore.net