Html file upload filter onclick possible? - php

Question

i am creating a facebook application which lets user to upload photo through html form. I was wondering it is possible to implement a filter to check the file ext before the form is being submit.
<form enctype="multipart/form-data" action="uploader.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
Choose a file to upload: <br/>
<input name="uploadedfile" type="file" class="btn"
onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" accept="image/gif,image/png,image/jpeg"/> (limit: 2MB)<br />
<input type="submit" value="Upload File" class="btn"
onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"
onclick='checkExt()'/>
</form>
I have tried varies ways, javascript or php.
function checkExt() {
var filePath = document.getElementByName("uploadedfile");
if(filePath.indexOf('.') == -1)
return false;
var validExtensions = new Array();
var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
validExtensions[0] = 'jpg';
validExtensions[1] = 'jpeg';
validExtensions[2] = 'bmp';
validExtensions[3] = 'png';
validExtensions[4] = 'gif';
for(var i = 0; i < validExtensions.length; i++) {
if(ext == validExtensions[i])
return true;
}
top.location.href = 'http://www.google.com';
return false;
}
for the php, is there a way to get the file info before form submit?
$file = document.getElementByName("uploadedFile"); //wondering if this works.
$result_array = getimagesize($file);
if ($result_array !== false) {
$mime_type = $result_array['mime'];
switch($mime_type) {
case "image/jpeg":
echo "file is jpeg type";
break;
case "image/gif":
echo "file is gif type";
break;
default:
echo "file is an image, but not of gif or jpeg type";
}
} else {
echo "file is not a valid image file";
}
Please advice me. I am still new to facebook application.

Answer 1

Why do you redirect if they try to upload a wrong ext?
I would remove top.location.href = 'http://www.google.com';
You have several mistakes in the script.
var filePath = document.getElementByName("uploadedfile");
needs to be
var filePath = document.getElementsByName("uploadedfile")[0].value;
or add an id and do
var filePath = document.getElementById("uploadedfile").value;
or use my favourite method and pass the form object to the function:
<form onsubmit="return checkExt(this)" ...>
function checkExt(theForm) {
var filePath = theForm.uploadedfile.value;
Lastly remove the onclick from the submit and put it in the onsubmit of the form:
<form enctype="multipart/form-data" action="uploader.php" method="POST"
onSubmit="return checkExt(this)">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
Choose a file to upload: <br/>
<input name="uploadedfile" id="uploadedfile" type="file" class="btn"
onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" accept="image/gif,image/png,image/jpeg"/> (limit: 2MB)<br />
<input type="submit" value="Upload File" class="btn"
onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/>
</form>

Answer 2

Just some thoughts:
It's possible to have JS check the extension. Its just the part after the '.', so basic string-operations.
It's not safe and not reliable, though. It can be fooled and sidestepped.
You can send an AJAX-request to have the extension(s) transmitted before you submit the form.
For pretty acurate FileType-Info check out PHP's FileInfo-Extension.