1

I used accept to limit selected file type.
but sometimes it failed, e.g. this m4v file.
http://sites.lafayette.edu/newquisk/files/2011/08/ken-video.m4v

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile" accept=".mp4">

I thought this setting can only accept *.mp4 file.
but the m4v file is selectable under this condition.
althought type of this file is video/mp4 but doesn't it filter by extension?

I can ignore this file by JavaScript, but I still want to find a way to make this kinds of file are not selectable in file select popup?

xxi
  • 1,430
  • 13
  • 24
  • 2
    That's a known Chrome bug, they don't really filter by extension but by mime type. You can star [this issue](https://bugs.chromium.org/p/chromium/issues/detail?id=646941) if you wish. – Kaiido Feb 17 '20 at 06:04

1 Answers1

1

Since m4v file has the same type with mp4 file, you may want to check file name instead of file type:

var element = document.querySelector('#myfile');

element.addEventListener('change', function () {
  var file = this.files[0];
  if (!file) return;

  // if you select m4v file, file.type should be "video/mp4"
  
  if (file.name.endsWith('.mp4')) {
    console.log(file);
  } else {
    console.log('not ends with .mp4');
  }
});
<input type="file" id="myfile" name="myfile" accept=".mp4">
Tân
  • 1
  • 15
  • 56
  • 102
  • That doesn't really help fix the file-picker issue though. – Kaiido Feb 17 '20 at 06:08
  • @Kaiido Well, when the issue is fixed, my answer can be flagged as obsolete. But now, it's still working. Since the OP has mentioned about js, it's just an option. – Tân Feb 17 '20 at 06:13
  • Yes but not an option that fixes the issue, since what OP wants is to have the file picker filter out files with extension .m4v. This code only filters out at processing, not at selection. – Kaiido Feb 17 '20 at 06:14