1

I want To stop Form submit if i have selected wrong file in input file through js validation or from any other method .currently when i selected word file through file field it submit the form but return me the alert that this kind of file u can not upload and remove the input fields value how can i stop this ..

And js to stop wrong image file but its not working::

$("#profile_pic").change(function () {
  var fileExtension = ['jpeg', 'jpg', 'png', 'gif'];
  if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
      alert("Only formats are allowed : "+fileExtension.join(','));
       return false;
  }
});
Ashwini
  • 21
  • 2
  • 1
    I hope these answers will help you out - [stackoverflow answer 1](https://stackoverflow.com/questions/8231058/file-type-validation-with-javascript) [stackoverflow answer 2](https://stackoverflow.com/questions/21396279/display-image-and-validation-of-image-extension-before-uploading-file-using-java) [stackoverflow answer 3](https://stackoverflow.com/questions/4234589/validation-of-file-extension-before-uploading-file) – BeingExpert Sep 28 '17 at 05:13
  • Possible duplicate of [File type validation with Javascript](https://stackoverflow.com/questions/8231058/file-type-validation-with-javascript) – RRikesh Sep 28 '17 at 05:14
  • i want this on my onchange of image like when i am selecting the image.. – Ashwini just now edit – Ashwini Sep 28 '17 at 05:24
  • In my case return false not working it submit the form after selecting wrong image – Ashwini Sep 28 '17 at 05:30
  • and the alert is working ? – Atural Sep 28 '17 at 07:52

3 Answers3

0

It's possible to check only the file extension, but user can easily rename virus.exe to virus.jpg and "pass" the validation.

For what it's worth, here is the code to check file extension and abort if does not meet one of the valid extensions: (choose invalid file and try to submit to see the alert in action)

example link

0
 <input type="file" accept=".jpeg,.jpg,.png,.gif"/>;

Add accept attribute on your file input tag. And Specify exactly what type of file extensions you are allowing to post.

Dinidu Hewage
  • 2,169
  • 6
  • 40
  • 51
Dilipen D
  • 79
  • 3
  • in that case if we change the extension maually it wil take the file .. not a gud solution – Ashwini Sep 28 '17 at 05:23
  • It is just for client side validation if we want to be more secure mean we want to validation server side once again. – Dilipen D Sep 30 '17 at 21:36
0

Because whatever happens, will happen in the browser, there isn't really any reliable solution to this problem. You can disable form / buttons / inputs when you figure out that the extension is invalid, but that won't stop anyone from using developer tools and enable it back - allowing them to submit the form after all.

As @Nishantha Kumara has mentioned - changing file extension is one of the commonly known ways that hackers try to send infected files so relying on extension isn't really guaranteeing you anything.

The only real way of ensuring that only files with valid extension are being uploaded is to do the validation on the server by either checking their mime type or the extension - none of which however would guarantee that the file is not infected - for this you would probably have to run some sort of antivirus scan on them once uploaded.

If it's only to make the form disabled in the browser and you're not bothered about anything else then you can simply disable the form / button when the file with the incorrect extension is selected, but again - this should probably be detected / enabled when selecting the files to ensure no files with wrong extension can be selected in the first place.

Sebastian Sulinski
  • 5,815
  • 7
  • 39
  • 61