How to import text file to javascript?

Question

I'm kind of stuck on a problem, I’m trying to import a text file from my local computer to JavaScript and populate HTML dropdown's according to the text file. I have spent a lot of time looking at similar questions on stack overflow and i haven't found the solution to the problem yet. Here is an example of what the text file looks like:

     Dogs - 
     Blue Dog
     Black Doggo
     Random Doggo

     Cats -
     Neon cat
     Grumpy cat
     Potato cat

Here is what my js looks like:

     <html>
   <body>
<select name="myselect">
 </select>
  </body>
   <script>
  Function GetTxt() {
  var AllData = '';
  var StuffFile = new XMLHttpRequest();

  StuffFile.open("GET", "C:Users/Documents/Desktop/WeirdDoggos.txt",true)
   StuffFile.onreadystatechange = function(){
   if(StuffFile.readyStatus === 4) {
   if (StuffFile.status === 200 || StuffFile.status === 0) {
      AllData = StuffFile.responseText;
      var lines = StuffFile.responseText.split('/n').map(function (line){
      return line.trim   
   });
   var select = $("select[name=myselect]")
   var optionCounter = 0;
   var currentGroup = "";
   lines.forEach(function(line){
     if(line.endsWith(" -")){
  currentGroup = line.substring(0, line.length - 2);
   optionCounter = 0;
               select.append("<optgroup id='" + currentGroup + "' label='" + currentGroup + "'>")
   } else if(line === ""){
   select.append("</optgroup>");
   } else {
   select.append("<option type='checkbox' id='" 
      + (currentGroup + optionCounter) + "' name='" 
      + (currentGroup + optionCounter) + "' value='" 
      + line + "'>" + line + "</option>");
           }
       });
     }
    }
   }
   }
   </script>
   </html>

So I’m trying to populate Select name=”MySelect” in HTML, but I don’t think it’s importing the text file, any tips?

You cannot use JS on a webpage to automatically open and read a file on your computer. THat would be a massive security concern. XMLHttpRequest is for making HTTP requests to a webserver. Try https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript — jamesbtate, Mar 08 '18 at 20:43

score 2 · Accepted Answer · answered Mar 08 '18 at 21:19

You cannot read a file on a user's disk like that. As @Puddingfox mentioned, it would be a huge security hole. But what you can do is have a file input on the page where a user can select a text file on their computer and then read the contents of that file.

The difference between these two is that with a file upload button, the user's explicit action is required for the website to read a file on their disk as opposed to just reading someone's files without them knowing or permitting it.

Brian Campbell has a really good explanation of how to read the file after the user has selected it using the File API and I recommend reading what he had to say to learn a bit more about it.

A code sample of this is below.

<html>

<body>
  <input type="file" id="file" />
  <script type="text/javascript">
    document.getElementById('file').onchange = () => {
      const file = document.getElementById('file').files[0];
      if (file) {
        const reader = new FileReader();
        reader.readAsText(file, 'UTF-8');
        reader.onload = (evt) => {
          console.log(evt.target.result);
          // Do stuff with the text data here...
        };
        reader.onerror = (evt) => {
          console.error('Failed to read this file');
        };
      }
    };
  </script>
</body>

</html>

Hope this points you in the right direction, at least.

thanks man, will look into Filereader, u saved a lot of my time. — r.for, Mar 08 '18 at 22:44

score -1 · Answer 2 · answered Mar 08 '18 at 20:46

-1

Add this

StuffFile.open("GET", file:///User/**YOURUSERNAME**/Documents/Desktop/WeirdDoggos.txt ,true);

answered Mar 08 '18 at 20:46

ATM1000

7
1

How to import text file to javascript?

2 Answers2