Hi @johncosgrove,
Actually, the MIME type is used by your browser to decide how to present some data (or the server on how to interpret received data), the file extension is commonly used for your OS to decide what program to open a file with.
One file extension maps to at most one MIME type. One MIME type maps to zero or more file extensions. A good example is image/jpeg, which maps to both .jpg and .jpeg.
In a word, the file extension is not always reliable, so is the MIME type, both can be forged. Just like you tested on your side, that you change your file extension from an excel file to .pdf, which fools the MIME type allowed setting.
Here is a common MIME types list and I found that the agreed MIME type recognized file extension is ".pdf" which means that if you change the file extension from ".xls" to ".pdf", its MIME type will be changed from "application/vnd.ms-excel" to "application/pdf"
Short to say that the issue happened to you is indeed an known issue. There is no guaranteed way to do it at time of selection.
You could use JavaScript. Take in consideration that the big problem with doing this with JavaScript is to reset the input file. Well, this restricts to only JPG (for PDF you will have to change the mime type and the magic number😞
<form id="form-id">
<input type="file" id="input-id" accept="image/jpeg"/>
</form>
<script type="text/javascript">
$(function(){
$("#input-id").on('change', function(event) {
var file = event.target.files[0];
if(file.size>=2*1024*1024) {
alert("JPG images of maximum 2MB");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
if(!file.type.match('image/jp.*')) {
alert("only JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
var int32View = new Uint8Array(e.target.result);
//verify the magic number
// for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
alert("ok!");
} else {
alert("only valid JPG images");
$("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
return;
}
};
fileReader.readAsArrayBuffer(file);
});
});
</script>
For a complete list of mime types see Wikipedia.
For a complete list of magic number see Wikipedia.
Hope this could help you at some degree.
