I'm very new to JS. I've Html like this
<label for="myfile">Select a CSV file:</label><br>
<input type="file" id="myfile" name="myfile" class="file-select" accept="text/csv">
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 costume csv in order to test. But it's showing me error like
vue.js:590 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of null (reading 'files')"
(found in <Root>)
am i missing anything here?
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 <input> 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.