-1

Image here shows how one can manipulate the browser to choose a different fileI have gone through a tons of questions and answers regarding the similar issue and have found no help so far. The current methods state many method, of which the prominent one is :

<input type="file" id="fileSelect"
       accept=".csv,
               application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
               application/vnd.ms-excel">

However, this does not solve my issue. The user can still change the type of file to All Files in the browser and choose a different file. I want to know if there is any ways that exist in which I can restrict the user to selecting only excel files.

Zac
  • 1,305
  • 3
  • 17
  • 28
  • 2
    Possible duplicate of [Limit file format when using ?](http://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file) – p4sh4 Dec 05 '16 at 07:42
  • you can validate the extension in javascript. – Kevin Kloet Dec 05 '16 at 07:44
  • Dom's answer: http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv – Olaf Dec 05 '16 at 07:46
  • @p4sh4 - not a duplicate. i have gone through that before and it did not solve my problem. – Zac Dec 05 '16 at 07:49
  • Dom's answer did not help to meet what i wanted to achieve. – Zac Dec 05 '16 at 07:50
  • @NikhilZacharia It is a duplicate, and the accepted answer in that thread is also the answer to your question: "The developer cannot prevent the user from choosing files of any type or extension in the native OS file select dialog box." You can do some further validation after the user selects a file, but that's a different question. – p4sh4 Dec 05 '16 at 07:56
  • @p4sh4 - with all due respect, plz don't tell me that it is not possible, rather just say u do not know how to do it. I have posted this question seeking an answer, and i have gone through at least a ton of posts before i posted this, and so it is not a duplicate of what u said it is. I know that I could get this validation done from the server or using JS by myself, but I am clearly trying to restrict the user from committing a mistake. **Answer this question if u know how to, rather than marking it a duplicate** – Zac Dec 05 '16 at 08:04
  • What I know is that the effect you want to achieve is not possible with Web technologies, and your question is a duplicate and already has an answer. You can try contacting Apple and asking them to remove the "All files" option from the file upload dialog in the next version of macOS. – p4sh4 Dec 05 '16 at 08:19

1 Answers1

1

You can use change event to check if selected file .type matches one of accept attribute types

var input = document.getElementById("fileSelect");
input.addEventListener("change", function(e) {
  if (!new RegExp(this.accept.replace(/,/g, "|")).test(this.files[0].type)) {
     this.value = "";
     this.labels[0].innerHTML = "Invalid file type selected. "
                                + "Please select one of <code>" 
                                + this.accept 
                                + "</code> file types";
  } else {
    console.log("valid file type", this.files[0].type);
    this.labels[0].innerHTML = "";
    // do stuff
  }
})
[for="fileSelect"] {
  color:red;
}
<input type="file" id="fileSelect" accept=".csv,
               application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
               application/vnd.ms-excel"><br>
<label for="fileSelect"></label>
guest271314
  • 1
  • 15
  • 104
  • 177
  • this answer was really helpful, though I now understand that what i was hoping for can't be achieved. This is the best i could do. Thanks! :) – Zac Dec 07 '16 at 22:42