Javascript throwing error when I've given custom file path

Question

I'm very new to JS. I have Html markup like this:

Select a CSV file:

What's happening here is I'm allowing user to select CSV files & storing them in an object called myfile .

In JS

const selectedFile = document.getElementById('myfile').files[0];

console.log(selectedFile.name);
  this.fileName = selectedFile.name;
  Papa.parse(selectedFile, {
    skipEmptyLines: true,
    preview: readRange.numRows > 0 ? readRange.numRows : 0,
    complete: (results) => {
      console.log('Finished:', results.data);
      this.raw = results.data;
      this.limitColumns(readRange.numCols > 0 ? readRange.numCols : 0);
      this.header = Array.from(this.raw[0]); // problem: duplicated / null headers
      this.header.shift();
      this.refreshPreview();
      this.completed = true;
      console.log(this.completed);

verifying path

myfile.value
'C:\fakepath\r.csv'

Fakepath???

So I'm using myfile variable from Html & doing some operations on that CSV file..Upto know It's fine...So my requirement is without changing the source I re assigned my custom file path in Js to myfile variable. like

const mynewfile = "r.csv"
const selectedFile = document.getElementById('mynewfile').files[0];


console.log(selectedFile.name);
  this.fileName = selectedFile.name;
  Papa.parse(selectedFile, {
    skipEmptyLines: true,
    preview: readRange.numRows > 0 ? readRange.numRows : 0,
    complete: (results) => {
      console.log('Finished:', results.data);
      this.raw = results.data;
      this.limitColumns(readRange.numCols > 0 ? readRange.numCols : 0);
      this.header = Array.from(this.raw[0]); // problem: duplicated / null headers
      this.header.shift();
      this.refreshPreview();
      this.completed = true;
      console.log(this.completed);

So what I've done here is created a new variable & assigned my custom csv in order to test. But I get an error:

vue.js:590 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of null (reading 'files')"

(found in )

Am I missing anything here?

Dorward_19068 · Answer

Fakepath???

Browsers do not expose information about the structure of the visitor's file system to JavaScript running in web pages that they visit.

const mynewfile = "r.csv"
const selectedFile = document.getElementById('mynewfile').files[0];

Cannot read properties of null (reading 'files')"

The error message means that document.getElementById('mynewfile') returns null because there is no element with the ID mynewfile.

Possibly you were trying to use the variable mynewfile (since you defined it on the previous line but never use it) instead of the string literal 'mynewfile', but that won't work either — a file name is not the same as the ID you have given to your element earlier in the page.

There is no way for you, as the author of a webpage, to tell the browser (belonging to the visitor) to read a file your your choice from your visitor's disk.

That would be a major security problem.

The visitor must pick the file from a file input.

Javascript throwing error when I've given custom file path

1 Answers