Adding extra client-side validation to file upload form

For one of my projects I required a client-side validation in file upload form, that would warn user on every attempt of submitting that form, when file field would be empty or selected file would contain incorrect (not allowed) extension.

I decided to share this code here. Maybe someone else will also benefit out of it. Note, that this is rather solution, for example — it does string-only check for file extension. It does not check real mime-type, so it is still open on any kind of threats, that would exploit sending file with a forged extension.

Since this code is part of bigger project, first we need to deal with some assumptions I made, while writing it. You have to replicate them in your own project or change the code to suit your needs.

Key assumptions:

1. We’re using jQuery!
2. You have <p id="allowed-extensions-text"></p> anywhere withing your page code and it will contain list of allowed extensions. Remove (don’t add) this paragraph, and remove $('#allowed-extensions-text').html(allowedExtensionsText); line from the code to get rid of this small functionality.
3. Button <button id="button-ok">Something</button> is responsible for submitting the form (and doing all preliminary checks). Modify line $('#button-ok').click(function() to change this.
4. First (the only) <input type="file"/> field holds file to be sent to server. See filename = $('body').find('input[type=file]').val() line.

Here is the code:

[code language=”javascript”]
var
allowedExtensions = [‘.mp3’, ‘.doc’, ‘.docx’, ‘.xls’, ‘.xlsx’, ‘.ppt’, ‘.pptx’, ‘.pps’, ‘.jpg’, ‘.gif’, ‘.png’, ‘.avi’],
length = allowedExtensions.length,
allowedExtensionsText = ‘Allowed extensions are: ‘;

for (var i = 0; i < length – 2; i++) allowedExtensionsText = allowedExtensionsText + ‘<code>’ + allowedExtensions[i] + ‘, ‘;

allowedExtensionsText = allowedExtensionsText + ‘<code>’ + allowedExtensions[length – 2] + ‘</code> i <code>’ + allowedExtensions[length – 1] + ‘</code>.’;

$(‘#allowed-extensions-text’).html(allowedExtensionsText);

$(‘#button-ok’).click(function()
{
var
filename = $(‘body’).find(‘input[type=file]’).val(),
extension = filename.substring(filename.length – 4)

if((filename == ”) || (filename == null))
{
apprise(‘You must select any file!’, {});

return false;
}

if($.inArray(extension, allowedExtensions) < = -1)
{
apprise(‘Selected file has an invalid extension (<code>’ + extension + ‘)!<br /><br /><small>’ + allowedExtensionsText + ‘</small>’, {});

return false;
}

return false;
});
[/code]

I’m using Apprise — The attractive alert alternative for jQuery library for displaying cool-looking dialog boxes. However, in this piece of code they’re in simpliest form, so there isn’t much work in getting back to alert(). Simply change apprise('Text', {}); into alert('Text');.

Note! Due to bug in current version of Apprise, you must use apprise('Text', {}); (with empty brackets in the end) instead of apprise('Text'); or your dialog won’t be vertically centered.