This question already has answers here:
Javascript read file without using input
(3 answers)
Closed 9 months ago.
I'm trying to load simple text file in javascript, unfortunately with no success.
my code is:
var my_text:any;
var my_file:File = new File([], "C:\\Users\\riki7\\Downloads\\classes.txt");
var reader = new FileReader();
reader.onload = function() {
my_text = reader.result;
};
reader.readAsText(my_file);
alert(my_text);
after this code runs, I would expect to see classes.txt file content in pop-up alert, instead I get 'undefined'.
my file contains a, b, c.
does anyone know what is my problem? maybe the first parameter for File() constructor?
You have to use html tag <input type="file" id="input" /> and then hung a event listener on it, like that
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = this.files; /* now you can work with the file list */
}
then after simply bypass your file into the FileReader
const reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
And i guess that would be it.
You can find more examples there: https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications
Having your code where your alert runs upfront the callback function. If you need to see alter with the content, simply move your alert into the callback function:
reader.onload = function() {
my_text = reader.result;
alert(my_text);
};
because my_text is not ready when you call alert outside.
<input type="file" id="selectedFile">
<p id="display"></p>
<script>
var fr = new FileReader();
let test;
document.getElementById('selectedFile').addEventListener('change', x);
function x() {
fr.onload = ()=>{
document.getElementById('display').innerText = fr.result;
test = fr.result;
alert(fr.result);
}
fr.readAsText(this.files[0]);
}
</script>
<html>
<head>
<script>
var fileReadEvent = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var text = reader.result;
alert(text)
};
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='fileReadEvent(event)'><br>
</body>
</html>
I am trying to make a web app that will import excel file and pass it to google sheets. The idea is that different people will be uploading theirs table (format is the same) through web app to my spreadsheet where I will do the rest of the job.
For now I got this:
js code;
function doGet(e) {
Logger.log(e.parameter);
return HtmlService.createHtmlOutputFromFile("index");
}
function toroku(userInfo){
var url = "https://docs.google.com/spreadsheets/d/1gCMXhBTba-8PNeN5lk5wrumUGe_f4xNdip1DPCpaRSw/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("upload");
ws.appendRow([userInfo.table]);
}
And html;
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(JSON.parse(json_object));
jQuery( '#xlx_json' ).val( json_object );
})
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
document.getElementById('upload').addEventListener('click', handleFileSelect).value
google.script.run.toroku(handleFileSelect);
document.getElementById("upload").value = "";
</script>
<div class="form-row">
<button id="btn">登録！</button>
</div>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var userInfo = {};
userInfo.table = document.getElementById("xlx_json").value;
google.script.run.toroku(userInfo);
document.getElementById("xlx_json").value = "";
}
</script>
</body>
</html>
It reads the data from the excel and imports it to google sheets, but I'm getting an array not a table.
This is what I am getting imported to google sheets:
[{"Product":"2132030501430 ","Customer":"A","Units":"1","Deliver":"1"},{"Product":"2188130546030 ","Customer":"B","Units":"2","Deliver":"3"},{"Product":"2132650259800 ","Customer":"A","Units":"1","Deliver":"5"},{"Product":"2138512138000 ","Customer":"B","Units":"0","Deliver":"6"},{"Product":"2132032500270 ","Customer":"A","Units":"-10","Deliver":"7"},{"Product":"2116104013159 ","Customer":"B","Units":"200","Deliver":"8"},{"Product":"2116102039910 ","Customer":"A","Deliver":"9"},{"Product":"2145710030310 ","Customer":"B","Deliver":"10"},{"Product":"2132630164760 ","Customer":"A","Deliver":"9"},{"Product":"2116105051990 ","Customer":"B","Units":"0","Deliver":"5"},{"Product":"2145721006510 ","Customer":"A","Units":"0","Deliver":"4"},{"Product":"2132030900430 ","Customer":"B","Units":"7","Deliver":"3"},{"Product":"2132031500270 ","Customer":"A","Units":"5","Deliver":"2"},{"Product":"2138506049100 ","Customer":"B","Units":"6","Deliver":"1"},{"Product":"2132042501730 ","Customer":"C","Units":"31","Deliver":"9"},{"Product":"2132030901470 ","Customer":"D","Units":"20","Deliver":"8"},{"Product":"2116101050089 ","Customer":"F","Units":"126","Deliver":"7"},{"Product":"2116104051870 ","Customer":"C","Units":"3","Deliver":"6"},{"Product":"2188131528030 ","Customer":"D","Units":"82","Deliver":"4"},{"Product":"2145718013050 ","Customer":"F","Deliver":"4"},{"Product":"2188140578030 ","Customer":"C","Units":"20","Deliver":"4"},{"Product":"2132640087170 ","Customer":"D","Deliver":"4"},{"Product":"2138506026000 ","Customer":"F","Units":"0","Deliver":"4"},{"Product":"2132042501770 ","Customer":"C","Units":"15","Deliver":"4"},{"Product":"2187106025940 ","Customer":"D","Units":"90","Deliver":"4"}]
My question is how can I convert it into a table?
should it be done on html side?
Also I would like to say that I am newbie in programing world so please tell me in the simplest way what should I do with this.
Best Regards!
I believe your goal as follows.
When a XLSX file on the local PC is selected, you want to retrieve the XLSX data and put to textarea using Javascript and xlsx.js.
When a bottom button is clicked, you want to send the values in textarea to Google Apps Script side, and want to put the values to the Google Spreadsheet.
From Excel file has only one sheet with one simple table, I understood that the XLSX data has only one sheet.
Modification points:
In your script, when there are multiple sheets in the XLSX data, the values of only the last sheet are sent to Google Apps Script. Because the values of other sheets are overwritten in workbook.SheetNames.forEach().
But from your replying, I could understand that you suppose that the XLSX data has only one sheet. So in this case, your script becomes more simple.
In your script, an error occurs at document.getElementById('upload').addEventListener('click', handleFileSelect).value.
In order to put the values to the Spreadsheet, I would like to propose to use setValues instead of appendRow. When setValues is used, the values of the multiple rows and columns can be put with one call.
In this case, the values are required to be 2 dimensional array.
When above points are reflected to your script, it becomes as follows.
Modified script:
Google Apps Script side:
function doGet(e) {
Logger.log(e.parameter);
return HtmlService.createHtmlOutputFromFile("index");
}
function toroku(userInfo){
var values = JSON.parse(userInfo.table);
var url = "https://docs.google.com/spreadsheets/d/1gCMXhBTba-8PNeN5lk5wrumUGe_f4xNdip1DPCpaRSw/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("upload");
ws.getRange(ws.getLastRow() + 1, 1, values.length, values[0].length).setValues(values);
}
HTML & Javascript side:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>
<div class="form-row">
<button id="btn">登録！</button>
</div>
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
document.getElementById("btn").addEventListener("click", doStuff);
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
jQuery('#xlx_json').val(JSON.stringify(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {header: 1})));
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
function doStuff() {
var userInfo = {};
userInfo.table = document.getElementById("xlx_json").value;
google.script.run.toroku(userInfo);
document.getElementById("xlx_json").value = "";
}
</script>
</body>
</html>
Note:
When you modified the script of Web Apps, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Please be careful this.
References:
appendRow(rowContents)
setValues(values)
my goal is to make an upload of an image, I have a method whre I want to assign the base64 string to the class method file, the problem is that when I try to get the value in the property, the result is undefined and I don't understand why. I whould like to assign the string to the property _file or return it in the method.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="" enctype="multipart/form-data">
<input type="file" />
<input id="btn" type="submit" value="submit" />
</form>
<script>
class File {
constructor() {
this._file;
}
setFile(file) {
const input = document.querySelector(file).files[0];
const reader = new FileReader();
reader.readAsDataURL(input);
reader.onload = function () {
this._file = reader.result.split(",")[1];
console.log(this._file);
};
}
getFile() {
console.log(this._file);
}
}
document
.getElementById("btn")
.addEventListener("click", function (event) {
event.preventDefault();
const file = new File();
file.setFile("input[type=file]");
file.getFile();
});
</script>
You have two subtle mistakes:
reader.onload = function() {
this._file = reader.result.split(",")[1];
console.log(this._file);
};
Here, the this keyword is not pointing to your File instance, it is pointing to reader. This can be resolved by using arrow functions:
reader.onload = () => {
this._file = reader.result.split(",")[1];
console.log(this._file);
};
Now, the this keyword is pointing to your File instance. Now you have another problem: readAsDataURL is asynchronous, that is, it does all the job in the background, like AJAX, without blocking the main thread. So if you have:
file.setFile("input[type=file]");
file.getFile();
Nothing guarantees that file.getFile() will print the updated value for _file, because you don't know if the reader has finished its job or not. So my recommendation is using a callback:
class File {
constructor() {
// ...
}
setFile(file, callback) {
const input = document.querySelector(file).files[0];
const reader = new FileReader();
reader.onload = () => { // when reader has finished
this._file = reader.result.split(",")[1]; // update _file property
callback(); // execute callback
};
reader.readAsDataURL(input);
}
getFile() {
console.log(this._file);
}
}
document.getElementById("btn").addEventListener("click", function(event) {
event.preventDefault();
const file = new File();
file.setFile("input[type=file]", function() {
// put here all the code that uses the file variable
file.getFile();
});
});
LIVE DEMO
class File {
constructor() {
// ...
}
setFile(file, callback) {
const input = document.querySelector(file).files[0];
const reader = new FileReader();
reader.onload = () => { // when reader has finished
this._file = reader.result.split(",")[1]; // update _file property
callback(); // execute callback
};
reader.readAsDataURL(input);
}
getFile() {
console.log(this._file);
}
}
document.getElementById("btn").addEventListener("click", function(event) {
event.preventDefault();
const file = new File();
file.setFile("input[type=file]", function() {
// put here all the code that uses the file variable
file.getFile();
});
});
<form action="" enctype="multipart/form-data">
<input type="file" />
<input id="btn" type="submit" value="submit" />
</form>
I'm new to d3.js so I know this might seem as a silly question to some so please bear with me. I'm trying to parse a csv file which a user uploads and print it's output in the console. I'm able to parse the CSV file when I provide the absolute path of the CSV file but when I try doing the same with file upload functionality I'm not getting any output in the console..
Working Javascript Code..
var dataset = [];
d3.csv("sample.csv", function(data) {
dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; });
console.log(dataset[0]);
console.log(dataset.length);
});
Console Output...
["Men's Brooks Ghost 8 Running Shoe Black/High Risk Red/Silver Size 11.5 M US", "Shoes", "B00QH1KYV6", "$120.00 "]
8
New HTML code..
<input type="file" id="csvfile" name="uploadCSV"/>
<br/>
<button onclick="howdy()">submit</button>
Modified Javascript Code(not working)..
var myfile = $("#csvfile").prop('files')[0];
var reader = new FileReader();
reader.onload = function(e) {
var text = reader.result;
}
reader.readAsDataURL(myfile);
var dataset = [];
d3.csv(reader.result , function(data) {
dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; });
console.log(dataset[0]);
console.log(dataset.length);
})
Since there was no official documentation on how to handle user uploaded CSV file I can't figure out where I'm going wrong..Is there a way I can use HTML5 file reader?? Please help..
You are close but you don't need to and can't call d3.csv on a reader.result. d3.csv makes an async AJAX call to retrieve a CSV file from a server. You already have the file contents and just want to parse, so use d3.csv.parse.
Full working example:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<input type="file" onchange="loadFile()" />
<script>
var reader = new FileReader();
function loadFile() {
var file = document.querySelector('input[type=file]').files[0];
reader.addEventListener("load", parseFile, false);
if (file) {
reader.readAsText(file);
}
}
function parseFile(){
var doesColumnExist = false;
var data = d3.csv.parse(reader.result, function(d){
doesColumnExist = d.hasOwnProperty("someColumn");
return d;
});
console.log(doesColumnExist);
}
</script>
</body>
</html>
This is for d3-csv#3
<!-- https://www.jsdelivr.com/package/npm/d3-dsv -->
<script src="https://cdn.jsdelivr.net/npm/d3-dsv#3.0.1/dist/d3-dsv.min.js" integrity="sha256-IrzYc2a3nTkfvgAyowm/WKmIGdVCMCcccPtz+Y2y6VI=" crossorigin="anonymous"></script>
<input type="file" accept=".csv">
<button>test button</button>
<script>
const testData = `owner,repo,"branch name"
foo,demo,master
boo,"js awesome",sha1123456
`
document.querySelector(`input`).onchange = async e => {
const input = e.target
const file = input.files[0]
const reader = new FileReader()
reader.readAsText(new Blob(
[file],
{"type": file.type}
))
const fileContent = await new Promise(resolve => {
reader.onloadend = (event) => {
resolve(event.target.result)
}
})
const csvData = d3.csvParse(fileContent)
console.log(csvData)
}
document.querySelector(`button`).onclick = e => {
const csvData = d3.csvParse(testData)
console.log(csvData)
}
</script>
The below link may help you know the implementation of csvParse
csv.js : The csv, tsv(tab) are dependent by dsv.js
dsv.js
If you just load the CSV only then do not import the whole JS. (instead of the d3-csv.js)
https://cdn.jsdelivr.net/npm/d3#7.0.1/dist/d3.min.js
https://cdn.jsdelivr.net/npm/d3-dsv#3.0.1/dist/d3-dsv.min.js
This is an old question and I think we have to clarify some points.
How to load a local csv file
How to link the loaded file with D3
1. Load a file is very simple just check this example:
const fileInput = document.getElementById('csv')
const readFile = e => {
const reader = new FileReader()
reader.onload = () => {
document.getElementById('out').textContent = reader.result
}
reader.readAsBinaryString(fileInput.files[0])
}
fileInput.onchange = readFile
<div>
<p>Select local CSV File:</p>
<input id="csv" type="file" accept=".csv">
</div>
<pre id="out"><p>File contents will appear here</p></pre>
Here we have a simple input element with type="file" attribute, this lets us to pick a csv file. Then the readFile() function will be triggered whenever a file is selected and will call the onload function after reading the file as a binary string.
2. I recommend to use readAsDataURL() to integrate it with d3 like this:
const fileInput = document.getElementById('csv')
const previewCSVData = async dataurl => {
const d = await d3.csv(dataurl)
console.log(d)
}
const readFile = e => {
const file = fileInput.files[0]
const reader = new FileReader()
reader.onload = () => {
const dataUrl = reader.result;
previewCSVData(dataUrl)
}
reader.readAsDataURL(file)
}
fileInput.onchange = readFile
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div>
<p>Select local CSV File:</p>
<input id="csv" type="file" accept=".csv">
</div>
<pre id="out"><p>File contents will appear here</p></pre>
To integrate the loaded file we call previewCSVData() and pass the file then we parse it using d3.csv() method. Also lets use await because it is an asynchronous call.
Note:
d3.csv internally uses fetch and works for any type of URL, (httpURL, dataURL, blobURL, etc...)
I'm tying to read and output a text file. The Chrome console complains:
caught TypeError: Cannot read property '0' of undefined FinanceDashBoard.html:22"
Not sure what I am doing wrong ?
The code is as follows:
<html>
<head>
<title>Read File (via User Input selection)</title>
</head>
<body>
<main>
<label>Load a text database file: <input type="file" id="txtfile" ></label>
</main>
<script type="text/javascript">
var dbFileElm = document.getElementById('txtfile');
dbFileElm.onchange = function() {
var filePath = dbFileElm.files[0];
var reader = new FileReader();
var output = ""; //placeholder for text output
reader.onload = function (e) {
output = e.target.result;
displayContents(output);
}
reader.readAsText(filePath.files[0]);
}
// Ignore code below it doesn't work yet.
function displayContents(txt) {
var el = document.getElementById('main');
el.innerHTML = txt; //display output in DOM
}
</script>
</body>
</html>
Two mistakes.
1) Change this line:
reader.readAsText(filePath.files[0]);
to this:
reader.readAsText(filePath);
Because filePath is already: dbFileElm.files[0];
2) The main tag has no ID, so getting element by ID main will not work.
Just edit it to:
<main id="main">
You have no elements that have id="main"
Try something like...
<main id="main"> ...
Or if you're trying to populate your text box...
var el = document.getElementById('txtfile');
this post has answer to question
HTML input file selection event not firing upon selecting the same file
and if you set your input value to null, is working for me
dbFileElm.onChange = function() {
this.value = null;
var filePath = dbFileElm.files[0];
var reader = new FileReader();
var output = ""; //placeholder for text output
reader.onload = function (e) {
output = e.target.result;
displayContents(output);
}
reader.readAsText(filePath.files[0]);
}