Is it possible to detect file extension change with Javascript during HTML upload

Question

I have a hypothetical question. I currently am using AngularJS in my application and I am using a third party module, ng-file-upload, for file uploads. Now obviously I can check the file extension of the uploaded file and exclude it / prevent it from being sent to the server should it be undesirable, for example I only wish to allow the upload of images and the user uploads a word document. However I was thinking. Should a malicious user change a file from say "nastyfile.exe" to "nastyfile.gif" the malicious file would pass my check/validation using the File.type property as the File.type would be image/gif. To my knowledge there is no way on the frontend I could check if the original file extension has been modified using JavaScript. Is this the case or is there a way to determine this?

Thanks in advance.

Answer 1

Try to create an image. Then listen error & load event if load trigger, it is an image, else if error trigger it is not an image ;)

var img = new Image();

img.onerror = function() { /* not an image */ }
img.onload = function() { /* it is an image */ }

img.src = 'PATH/FILENAME';