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 stackoverflow.com/questions/3582671/… — jamesbtate
– jamesbtate, Commented Mar 8, 2018 at 20:43

julianwyz · Accepted Answer · 2018-03-08 21:19:40Z

2

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.

answered Mar 8, 2018 at 21:19

julianwyz

3,1802 gold badges32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

r.for Over a year ago

thanks man, will look into Filereader, u saved a lot of my time.

ATM1000 · Accepted Answer · 2018-03-08 20:46:24Z

-1

Add this

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

answered Mar 8, 2018 at 20:46

ATM1000

71 bronze badge

Collectives™ on Stack Overflow

How to import text file to javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related