CODEWITHSUNDEEP
javascriptjquery
William Flinchbaugh
William Flinchbaugh

Reputation: 45

Read local text files js

So, with my chrome extension I need to read a text file. I'm trying to use this to just output the text file to the console

$.get('text.txt', function(data){
    console.log(data);
});

But in console it outputs the data of the webpage, not my text file at all.

EDIT- Now I understant how jQuery.get works. I have my local text file and jQuery.get is meant for server files. I need a way to read local text files. Any help here?

Upvotes: 3

Views: 139

Answers (4)

Michu
Michu

Reputation: 160

You can use FileReader to read files, in this exeple I use a csv file, but you can use txt to.

In my case, I use a input with type 'file' and with a onChange I load the file. By other part, I have a ref for indicate the source.

<input type="file" class="custom-file-input" ref="doc_categories" onChange="read_file">

In the method 'read_file', I get the first file and I check that exist by his name.

this.file = this.$refs.doc_categories.files[0];   

if(this.file.name != undefined){
     const reader = new FileReader();
     if (this.file.name.includes(".csv")) {
        reader.onload = (res) => {
            this.content = res.target.result;
        };
        reader.onerror = (err) => console.log(err);
        reader.readAsText(this.file);
     } else {
       this.content = "check the console for file output";
       reader.onload = (res) => {
         console.log(res.target.result);
       };
       reader.onerror = (err) => console.log(err);
       reader.readAsText(this.file);
     }
}else{
  $.notify('Error to read the file.');
}

This code comes from vue code and I tried to migrate to js vanilla. I hope it helped you.

Upvotes: 0

Titulum
Titulum

Reputation: 11496

You can read local files like so:

function readTextFile(file) {
  const fReader = new FileReader();
  fReader.readAsText(input.files[0]);
  fReader.onloadend = function(event) {
    document.getElementById('contents').innerHTML = event.target.result;
  }
}

const input = document.getElementById('myfile');
input.addEventListener('change', function() {
  readTextFile(input.files[0])
});
<input type="file" id="myfile" name="myfile">
<div id="contents"></div>

Documentation for the FileReader.

Upvotes: 0

Zeeshan Eqbal
Zeeshan Eqbal

Reputation: 260

SOLUTION:

It will not load files from your local filesystem this way

You need to put it on a web server and load it from there. On the same site as you have the JavaScript loaded from.

Creating the webserver on localhost should work in Chrome, As it doesn't support reading files from the local filesystem by default.

Additionally, you can start chrome using option --allow-file-access-from-files, which would allow access to local files.

Upvotes: 0

Mamun
Mamun

Reputation: 68933

You have to specify the dataType (that you're expecting back from the server) as text:

$.get('text.txt', function(data){
  console.log(data);
}, 'text');

Upvotes: 2

Related Questions