Related
I’m trying to implemennt a simple text file reader by creating a function that takes in the file’s path and converts each line of text into a char array, but it’s not working.
function readTextFile() {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "testing.txt", true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4) {
var allText = rawFile.responseText;
document.getElementById("textSection").innerHTML = allText;
}
}
rawFile.send();
}
What is going wrong here?
This still doesn’t seem to work after changing the code a little bit from a previous revision and now it's giving me an XMLHttpRequest exception 101.
I’ve tested this on Firefox and it works, but in Google Chrome it just won't work and it keeps giving me an Exception 101. How can I get this to work on not just Firefox, but also on other browsers (especially Chrome)?
You need to check for status 0 (as when loading files locally with XMLHttpRequest, you don't get a status returned because it's not from a Webserver)
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
And specify file:// in your filename:
readTextFile("file:///C:/your/path/to/file.txt");
After the introduction of fetch api in javascript, reading file contents could not be simpler.
reading a text file
fetch('file.txt')
.then(response => response.text())
.then(text => console.log(text))
// outputs the content of the text file
reading a json file
fetch('file.json')
.then(response => response.json())
.then(jsonResponse => console.log(jsonResponse))
// outputs a javascript object from the parsed json
Update 30/07/2018 (disclaimer):
This technique works fine in Firefox, but it seems like Chrome's fetch implementation does not support file:/// URL scheme at the date of writing this update (tested in Chrome 68).
Update-2 (disclaimer):
This technique does not work with Firefox above version 68 (Jul 9, 2019) for the same (security) reason as Chrome: CORS request not HTTP. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp.
Visit Javascripture ! And go the section readAsText and try the example. You will be able to know how the readAsText function of FileReader works.
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
};
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'>
...
</div>
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>
Modern solution:
Use fileOrBlob.text() as follows:
<input type="file" onchange="this.files[0].text().then(t => console.log(t))">
When user uploads a text file via that input, it will be logged to the console. Here's a working jsbin demo.
Here's a more verbose version:
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await file.text();
console.log(text);
}
</script>
Currently (January 2020) this only works in Chrome and Firefox, check here for compatibility if you're reading this in the future: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text
On older browsers, this should work:
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await (new Response(file)).text();
console.log(text);
}
</script>
Related: As of September 2020 the new Native File System API available in Chrome and Edge in case you want permanent read-access (and even write access) to the user-selected file.
Yes JS can read local files (see FileReader()) but not automatically: the user has to pass the file or a list of files to the script with an html <input type="file">.
Then with JS it is possible to process (example view) the file or the list of files, some of their properties and the file or files content.
What JS cannot do for security reasons is to access automatically (without the user input) to the filesystem of his computer.
To allow JS to access to the local fs automatically is needed to create not an html file with JS inside it but an hta document.
An hta file can contain JS or VBS inside it.
But the hta executable will work on windows systems only.
This is standard browser behavior.
Also Google Chrome worked at the fs API, more info here: http://www.html5rocks.com/en/tutorials/file/filesystem/
Using Fetch and async function
const logFileText = async file => {
const response = await fetch(file)
const text = await response.text()
console.log(text)
}
logFileText('file.txt')
Try creating two functions:
function getData(){ //this will read file and send information to other function
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var lines = xmlhttp.responseText; //*here we get all lines from text file*
intoArray(lines); *//here we call function with parameter "lines*"
}
}
xmlhttp.open("GET", "motsim1.txt", true);
xmlhttp.send();
}
function intoArray (lines) {
// splitting all text data into array "\n" is splitting data from each new line
//and saving each new line as each element*
var lineArr = lines.split('\n');
//just to check if it works output lineArr[index] as below
document.write(lineArr[2]);
document.write(lineArr[3]);
}
Provably you already try it, type "false" as follows:
rawFile.open("GET", file, false);
other example - my reader with FileReader class
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>
<body>
<script>
function PreviewText() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadTextValue").value = oFREvent.target.result;
document.getElementById("obj").data = oFREvent.target.result;
};
};
jQuery(document).ready(function(){
$('#viewSource').click(function ()
{
var text = $('#uploadTextValue').val();
alert(text);
//here ajax
});
});
</script>
<object width="100%" height="400" data="" id="obj"></object>
<div>
<input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
<input id="uploadText" style="width:120px" type="file" size="10" onchange="PreviewText();" />
</div>
Source file
</body>
</html>
This might help,
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "sample.txt", true);
xmlhttp.send();
Local AJAX calls in Chrome are not supported due to same-origin-policy.
Error message on chrome is like this:
"Cross origin requests are not supported for protocol schemes: http, data, chrome, chrome-extension, https."
This means that chrome creates a virtual disk for every domain to keep the files served by the domain using http/https protocols. Any access to files outside this virtual disk are restricted under same origin policy. AJAX requests and responses happen on http/https, therefore wont work for local files.
Firefox does not put such restriction, therefore your code will work happily on the Firefox. However there are workarounds for chrome too : see here.
Adding to some the above answers, this modified solution worked for me.
<input id="file-upload-input" type="file" class="form-control" accept="*" />
....
let fileInput = document.getElementById('file-upload-input');
let files = fileInput.files;
//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);
....
function readTextFile(filePath){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", filePath , true);
rawFile.send(null);
rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4){
if(rawFile.status === 200 || rawFile.status == 0){
var allText = rawFile.responseText;
console.log(allText);
}
}
}
}
function readTextFile(file) {
var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
rawFile.open("GET", file, false); // open with method GET the file with the link file , false (synchronous)
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
{
if(rawFile.status === 200) // status 200: "OK"
{
var allText = rawFile.responseText; // Returns the response data as a string
console.log(allText); // display text on the console
}
}
}
rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}
readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path
- read file text from javascript
- Console log text from file using javascript - Google chrome and mozilla firefox in my case i have this structure of files :
the console.log result :
How to read a local file?
By using this you will load a file by loadText() then JS will asynchronously wait until the file is read and loaded after that it will execture readText() function allowing you to continue with your normal JS logic (you can also write a try catch block on the loadText() function in the case any error arises) but for this example I keep it at minimal.
async function loadText(url) {
text = await fetch(url);
//awaits for text.text() prop
//and then sends it to readText()
readText(await text.text());
}
function readText(text){
//here you can continue with your JS normal logic
console.log(text);
}
loadText('test.txt');
If you want to prompt the user to select a file, then read its contents:
// read the contents of a file input
const readInputFile = (inputElement, callback) => {
const reader = new FileReader();
reader.onload = () => {
callback(reader.result)
};
reader.readAsText(inputElement.files[0]);
};
// create a file input and destroy it after reading it
const openFile = (callback) => {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = () => {readInputFile(el, (data) => {
callback(data)
document.body.removeChild(el);
})}
el.click();
}
Usage:
// prompt the user to select a file and read it
openFile(data => {
console.log(data)
})
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({`enter code here`
url: "TextFile.txt",
dataType: "text",
success: function (data) {
var text = $('#newCheckText').val();
var str = data;
var str_array = str.split('\n');
for (var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
// Add additional code here, such as:
alert(str_array[i]);
$('#checkboxes').append('<input type="checkbox" class="checkBoxClass" /> ' + str_array[i] + '<br />');
}
}
});
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
</script>
</head>
<body>
<div id="checkboxes">
<input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />
</div>
</body>
</html>
Get local file data in js(data.js) load:
function loadMyFile(){
console.log("ut:"+unixTimeSec());
loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
var mA_=mSdata.split("\n");
console.log(mA_.length);
}
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
return Math.round( (new Date()).getTime()/1000);
}
file of data.js like:
var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});
dynamic unixTime queryString prevents cached.
AJ works in web http://.
This function made for browsers and open file picker dialog and after user selection read file as binary and call callback function with read data:
function pickAndReadFile(callback) {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = function (){
const reader = new FileReader();
reader.onload = function () {
callback(reader.result);
document.body.removeChild(el);
};
reader.readAsBinaryString(el.files[0]);
}
el.click();
}
And use it like this:
pickAndReadFile(data => {
console.log(data)
})
This is an old question but there two main ideas that we have to be clear. Do we want to read the whole file or get it line by line?
Teo, I want to get the whole file and process it later.
Okay that is very easy we just call text (remember that text assumes that the file is encoded as UTF-8) and handle the file like this:
const $output = document.getElementById('output')
const $file = document.getElementById('file')
const fetchFile = async e => {
const [file] = e.target.files
const text = await file.text()
$output.textContent = text
}
$file.onchange = fetchFile
<input id='file' type='file' accept='text/plain'><br>
<pre id='output'>...</pre>
What about line by line? It is possible?.
Well my young Padawan, that is also possible we just need a split the text in lines like this
const $output = document.getElementById('output')
const $file = document.getElementById('file')
let count
const fetchFile = async e => {
const [file] = e.target.files
if (!file) return
count = 0
const text = await file.text()
$output.textContent = text
const lines = text.split(/\r?\n/gm)
for (const line of lines) {
if (line) count++
}
console.log({count})
}
$file.onchange = fetchFile
<input id='file' type='file' accept='text/plain'><br>
<pre id='output'>...</pre>
You can import my library:
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015#gmail.com"></script>
then, the function fetchfile(path) will return the uploaded file
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>
Please note: on Google Chrome if the HTML code is local, errors will appear, but saving the HTML code and the files online then running the online HTML file works.
In order to read a local file text through JavaScript using chrome, the chrome browser should run with the argument --allow-file-access-from-files to allow JavaScript to access local file, then you can read it using XmlHttpRequest like the following:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var allText = xmlhttp.responseText;
}
};
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
I know, I am late at this party. Let me show you what I have got.
This is a simple reading of text file
var path = "C:\\path\\filename.txt"
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
if (err) throw err;
console.log('OK: ' + filename);
console.log(data)
});
I hope this helps.
I am trying to automatically prompt a user to upload a CSV file and then I plan to access the data within, but I am unable to do this. What am I doing wrong? input.name is always undefined and viewing the whole object doesn't provide any relevant details.
The source of this query primarily came from the answer to this question Open file dialog box in JavaScript. I am trying to achieve this purely in javascript, not HTML.
jsfiddle
$(document).ready(function() {
var input = $(document.createElement('input'));
input.attr("type", "file");
input.on('change',function(){
alert(JSON.stringify(input.name, null, 4));
alert(JSON.stringify(input, null, 4));
});
input.trigger('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
input is the return value of $(). It is a jQuery object not a DOM object. To access the name property of the underlying DOM object, use the prop method.
input.prop('name')
I finally got it working. Here is the solution
$(document).ready(function() {
var input = $(document.createElement('input'));
input.attr("type", "file");
input.on('change', function() {
var csvFile = input[0].files[0];
var ext = csvFile.name.split(".").pop().toLowerCase();
if (ext != "csv") {
alert('upload csv');
return false;
}
if (csvFile != undefined) {
reader = new FileReader();
reader.onload = function(e) {
var data = $.csv.toObjects(e.target.result);
alert(JSON.stringify(data, null, 4));
$.each(data, function(index, val) {
//do something with each row of data val.ColumnName
});
}
reader.readAsText(csvFile);
}
});
input.trigger('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.js"></script>
Updated method with security implementations in place: 2023-01-24
You just can't use the document ready function but have to force the user to initiate the file open dialog:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
console.log(jQuery(). jquery);
$("#file-upload").click(function() {
var input = $(document.createElement('input'));
input.attr("type", "file");
input.on('change', function() {
var csvFile = input[0].files[0];
var ext = csvFile.name.split(".").pop().toLowerCase();
if (ext != "csv") {
alert('upload csv');
return false;
}
if (csvFile != undefined) {
reader = new FileReader();
reader.onload = function(e) {
var data = $.csv.toObjects(e.target.result);
alert(JSON.stringify(data, null, 4));
$.each(data, function(index, val) {
//do something with each row of data val.ColumnName
});
}
reader.readAsText(csvFile);
}
});
input.trigger('click');
});
</script>
</head>
<body>
Upload file
</body>
</html>
While creating an Ajax request for a user-uploaded image, I'm using a FormData() instance in the following manner:
var form_data = new FormData();
form_data.append(img_field, img_to_send, img_name);
Note that img_to_send is an object of type Blob.
My problem is this little browser compatibility caveat in the FormData MDN web docs:
XHR in Android 4.0 sends empty content for FormData with blob.
This relates to the Android browser (ver 4.0). This implies the xhr I'm attempting with FormData via append is probably going to fail in that particular browser.
My question is, what kind of alternative can I utilize to ensure the said browser is able to correctly process the xhr (a requirement of mine)? It'll be great to get an illustrative example.
And if there are no alternatives here, how do I write my code such that it only executes for browsers that support append with a blob object? Something like this?
if (window.FormData.append) {
// xhr code comes here
}
I'm quite unsure about that one.
p.s. please stick to pure JS for the purposes of answering the question.
... Not an easy task...
First question I would ask myself is if I really have to support this 7 years old browser with 0% of usage?
Feature detection:
We can now since quite recently check what a FormData contains through its get(), has(), entries(), values() etc. methods. But the first specifications and implementations didn't had these methods and hence didn't offer any mean to detect this particular flow.
I don't have such an Android 4 browser to check, but I guess they didn't had any of these methods either...
An other modern and a bit hackish way to check would be to use a ServiceWorker, which should be able to intercept a dummy request, letting you know if your Blob was well appended, but once again, ServiceWorkers didn't exist 7 years ago.
This leaves us with an ugly browser identification, rather than a feature-detection (e.g navigator.userAgent parsing). I can't advice doing so because it's so prone to err that it might be better just letting your user know it failed in your server response.
Workaround
The ability to send a generated Blob as binary through an other mean than FormData has only appeared a few months ago, and currently only Blink browsers do support it natively, and FF through a bug exploit.
This means that the only workaround for your users on Android Browser 4.xxx and for all the browsers that didn't support this method, would be to save the generated Blob on their device, and then to pick it from an <input> and send it through a normal HTML <form>, but this is assuming they will be able to even save this Blob on their device, and I can't tell for sure...
Or you could maybe send a 30% bigger base64 representation of this data.
Or, probably the best is to let them know they should update their browser because it's really dangerous to have such an old browser facing the web nowadays.
So a small recap of the less bad possibilities:
Check if FormData is available. Otherwise fallback to an ugly b64 in a <form>
Send a first time with optimal Blob as multi-part.
On server: check if the received Blob is empty. In this case, let the front-side know from a custom response.
If server said it failed, send again, this time as b64. Since the first time was empty, it should not have been a too heavy request anyway.
Hello this is a little example how to send file to server as BINARY STRING.
With this you not requrired a formData. You can send with simple POST.
Please change the url uploadFile.php to your URL. And read the comments about variables example that your server should receiving.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<input id="btnFile" type="file" accept="image/*" />
</div>
<div style="margin-top: 20px; width: 100px; border: solid 1px red">
<div id="divProgress" style="background-color: red;width: 10px; height: 5px; margin: 1px"></div>
</div>
<div style="margin-top: 20px">
<input id="btnSend" type="button" value="Send File" />
<input id= "user_id" type="hidden" value="123"/>
</div>
<script>
var btnFile = document.getElementById("btnFile");
var btnSend = document.getElementById("btnSend");
var divProgress = document.getElementById("divProgress");
var selectedFile = null;
//Register event on file selected or changed.
addEvents(btnFile, "change", function (event) {
if (event.target.files.length !== 0) {
var file = event.target.files[0];
//Check if the file is IMAGE.
if (file.type.match("image.*")) {
selectedFile = file;
} else {
selectedFile = null;
alert("Please select a IMAGE FILE");
}
} else {
selectedFile = null;
}
});
//EVENT BTN SEND.
addEvents(btnSend, "click", function () {
if (selectedFile === null) {
//Please select a file to upload.
alert("Please select the file.");
return;
}
//File reader object.
var fl = new FileReader();
//Add event to read the content file.
addEvents(fl, "load", function (evt) {
//alert(evt.target.result);
try {
//CONVERT ARRAY BUFFER TO BASE64 STRING.
var binaryString = evt.target.result;
//NOW YOU CAN SEND SIMPLE POST DATA.
var xhr = new XMLHttpRequest();
if (supportProgress(xhr)) {
addEvents(xhr, "progress", onXHRProgress);
addEvents(xhr, "loadstart", onXHRLoadStart);
addEvents(xhr, "abort", onXHRAbort);
}
xhr.open("POST", "/uploadFile.php", true);
//xhr.setRequestHeader("Content-Type", "application/json");
var user_id = document.getElementById('user_id').value;
var myData = {
uid: user_id,
fileName: selectedFile.name,
mimeType: selectedFile.type,
extension: getFileExtension(selectedFile),
contentFile: binaryString
};
xhr.send(JSON.stringify(myData));
/*
* IN YOUR SERVER SIDE YOU GET THE POST VARIABLE.
* fileName = The name of the file.
* mimeType = example "image/png"
* extension = png
* conentFile = Binary String of the content file and you can convert the Binary String to File in your disk according extension or mimeType
*/
} catch (e) {
}
});
//Read the file as arraybuffer.
fl.readAsBinaryString(selectedFile);
});
function onXHRProgress(e) {
var loaded = 0;
if (e.lengthComputable) {
if (e.loaded === e.total) {
loaded = 100;
selectedFile = null;
} else {
loaded = Math.round((e.loaded * 100) / e.total);
}
//Change the progress here.
divProgress.style.width = loaded + "px";
}
}
function onXHRLoadStart() {
divProgress.style.width = "0px";
}
function onXHRAbort() {
selectedFile = null;
}
function getFileExtension(file) {
var fileName = file.name;
var i = fileName.toString().lastIndexOf(".");
if (i !== -1) {
return fileName.toString().substring((i + 1), fileName.toString().length).toLowerCase();
} else {
return "";
}
}
function supportProgress(xhr) {
return !!(xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
}
function addEvents(obj, evtName, func) {
if (obj.addEventListener !== undefined && obj.addEventListener !== null) {
obj.addEventListener(evtName, func, false);
} else if (obj.attachEvent !== undefined && obj.attachEvent !== null) {
obj.attachEvent(evtName, func);
} else {
if (this.getAttribute("on" + evtName) !== undefined) {
obj["on" + evtName] = func;
} else {
obj[evtName] = func;
}
}
}
function removeEvents(obj, evtName, func) {
if (obj.removeEventListener !== undefined && obj.removeEventListener !== null) {
obj.removeEventListener(evtName, func, false);
} else if (obj.detachEvent !== undefined && obj.detachEvent !== null) {
obj.detachEvent(evtName, func);
} else {
if (this.getAttribute("on" + evtName) !== undefined) {
obj["on" + evtName] = null;
} else {
obj[evtName] = null;
}
}
}
</script>
</body>
</html>
I’m trying to implemennt a simple text file reader by creating a function that takes in the file’s path and converts each line of text into a char array, but it’s not working.
function readTextFile() {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "testing.txt", true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4) {
var allText = rawFile.responseText;
document.getElementById("textSection").innerHTML = allText;
}
}
rawFile.send();
}
What is going wrong here?
This still doesn’t seem to work after changing the code a little bit from a previous revision and now it's giving me an XMLHttpRequest exception 101.
I’ve tested this on Firefox and it works, but in Google Chrome it just won't work and it keeps giving me an Exception 101. How can I get this to work on not just Firefox, but also on other browsers (especially Chrome)?
You need to check for status 0 (as when loading files locally with XMLHttpRequest, you don't get a status returned because it's not from a Webserver)
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
And specify file:// in your filename:
readTextFile("file:///C:/your/path/to/file.txt");
After the introduction of fetch api in javascript, reading file contents could not be simpler.
reading a text file
fetch('file.txt')
.then(response => response.text())
.then(text => console.log(text))
// outputs the content of the text file
reading a json file
fetch('file.json')
.then(response => response.json())
.then(jsonResponse => console.log(jsonResponse))
// outputs a javascript object from the parsed json
Update 30/07/2018 (disclaimer):
This technique works fine in Firefox, but it seems like Chrome's fetch implementation does not support file:/// URL scheme at the date of writing this update (tested in Chrome 68).
Update-2 (disclaimer):
This technique does not work with Firefox above version 68 (Jul 9, 2019) for the same (security) reason as Chrome: CORS request not HTTP. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp.
Visit Javascripture ! And go the section readAsText and try the example. You will be able to know how the readAsText function of FileReader works.
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var text = reader.result;
var node = document.getElementById('output');
node.innerText = text;
console.log(reader.result.substring(0, 200));
};
reader.readAsText(input.files[0]);
};
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'>
...
</div>
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>
Modern solution:
Use fileOrBlob.text() as follows:
<input type="file" onchange="this.files[0].text().then(t => console.log(t))">
When user uploads a text file via that input, it will be logged to the console. Here's a working jsbin demo.
Here's a more verbose version:
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await file.text();
console.log(text);
}
</script>
Currently (January 2020) this only works in Chrome and Firefox, check here for compatibility if you're reading this in the future: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text
On older browsers, this should work:
<input type="file" onchange="loadFile(this.files[0])">
<script>
async function loadFile(file) {
let text = await (new Response(file)).text();
console.log(text);
}
</script>
Related: As of September 2020 the new Native File System API available in Chrome and Edge in case you want permanent read-access (and even write access) to the user-selected file.
Yes JS can read local files (see FileReader()) but not automatically: the user has to pass the file or a list of files to the script with an html <input type="file">.
Then with JS it is possible to process (example view) the file or the list of files, some of their properties and the file or files content.
What JS cannot do for security reasons is to access automatically (without the user input) to the filesystem of his computer.
To allow JS to access to the local fs automatically is needed to create not an html file with JS inside it but an hta document.
An hta file can contain JS or VBS inside it.
But the hta executable will work on windows systems only.
This is standard browser behavior.
Also Google Chrome worked at the fs API, more info here: http://www.html5rocks.com/en/tutorials/file/filesystem/
Using Fetch and async function
const logFileText = async file => {
const response = await fetch(file)
const text = await response.text()
console.log(text)
}
logFileText('file.txt')
Try creating two functions:
function getData(){ //this will read file and send information to other function
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var lines = xmlhttp.responseText; //*here we get all lines from text file*
intoArray(lines); *//here we call function with parameter "lines*"
}
}
xmlhttp.open("GET", "motsim1.txt", true);
xmlhttp.send();
}
function intoArray (lines) {
// splitting all text data into array "\n" is splitting data from each new line
//and saving each new line as each element*
var lineArr = lines.split('\n');
//just to check if it works output lineArr[index] as below
document.write(lineArr[2]);
document.write(lineArr[3]);
}
Provably you already try it, type "false" as follows:
rawFile.open("GET", file, false);
other example - my reader with FileReader class
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>
<body>
<script>
function PreviewText() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadTextValue").value = oFREvent.target.result;
document.getElementById("obj").data = oFREvent.target.result;
};
};
jQuery(document).ready(function(){
$('#viewSource').click(function ()
{
var text = $('#uploadTextValue').val();
alert(text);
//here ajax
});
});
</script>
<object width="100%" height="400" data="" id="obj"></object>
<div>
<input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
<input id="uploadText" style="width:120px" type="file" size="10" onchange="PreviewText();" />
</div>
Source file
</body>
</html>
This might help,
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "sample.txt", true);
xmlhttp.send();
Local AJAX calls in Chrome are not supported due to same-origin-policy.
Error message on chrome is like this:
"Cross origin requests are not supported for protocol schemes: http, data, chrome, chrome-extension, https."
This means that chrome creates a virtual disk for every domain to keep the files served by the domain using http/https protocols. Any access to files outside this virtual disk are restricted under same origin policy. AJAX requests and responses happen on http/https, therefore wont work for local files.
Firefox does not put such restriction, therefore your code will work happily on the Firefox. However there are workarounds for chrome too : see here.
Adding to some the above answers, this modified solution worked for me.
<input id="file-upload-input" type="file" class="form-control" accept="*" />
....
let fileInput = document.getElementById('file-upload-input');
let files = fileInput.files;
//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);
....
function readTextFile(filePath){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", filePath , true);
rawFile.send(null);
rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4){
if(rawFile.status === 200 || rawFile.status == 0){
var allText = rawFile.responseText;
console.log(allText);
}
}
}
}
function readTextFile(file) {
var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
rawFile.open("GET", file, false); // open with method GET the file with the link file , false (synchronous)
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
{
if(rawFile.status === 200) // status 200: "OK"
{
var allText = rawFile.responseText; // Returns the response data as a string
console.log(allText); // display text on the console
}
}
}
rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}
readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path
- read file text from javascript
- Console log text from file using javascript - Google chrome and mozilla firefox in my case i have this structure of files :
the console.log result :
How to read a local file?
By using this you will load a file by loadText() then JS will asynchronously wait until the file is read and loaded after that it will execture readText() function allowing you to continue with your normal JS logic (you can also write a try catch block on the loadText() function in the case any error arises) but for this example I keep it at minimal.
async function loadText(url) {
text = await fetch(url);
//awaits for text.text() prop
//and then sends it to readText()
readText(await text.text());
}
function readText(text){
//here you can continue with your JS normal logic
console.log(text);
}
loadText('test.txt');
If you want to prompt the user to select a file, then read its contents:
// read the contents of a file input
const readInputFile = (inputElement, callback) => {
const reader = new FileReader();
reader.onload = () => {
callback(reader.result)
};
reader.readAsText(inputElement.files[0]);
};
// create a file input and destroy it after reading it
const openFile = (callback) => {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = () => {readInputFile(el, (data) => {
callback(data)
document.body.removeChild(el);
})}
el.click();
}
Usage:
// prompt the user to select a file and read it
openFile(data => {
console.log(data)
})
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({`enter code here`
url: "TextFile.txt",
dataType: "text",
success: function (data) {
var text = $('#newCheckText').val();
var str = data;
var str_array = str.split('\n');
for (var i = 0; i < str_array.length; i++) {
// Trim the excess whitespace.
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
// Add additional code here, such as:
alert(str_array[i]);
$('#checkboxes').append('<input type="checkbox" class="checkBoxClass" /> ' + str_array[i] + '<br />');
}
}
});
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
</script>
</head>
<body>
<div id="checkboxes">
<input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />
</div>
</body>
</html>
Get local file data in js(data.js) load:
function loadMyFile(){
console.log("ut:"+unixTimeSec());
loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
var mA_=mSdata.split("\n");
console.log(mA_.length);
}
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
return Math.round( (new Date()).getTime()/1000);
}
file of data.js like:
var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});
dynamic unixTime queryString prevents cached.
AJ works in web http://.
This function made for browsers and open file picker dialog and after user selection read file as binary and call callback function with read data:
function pickAndReadFile(callback) {
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.style.display = 'none';
document.body.appendChild(el);
el.onchange = function (){
const reader = new FileReader();
reader.onload = function () {
callback(reader.result);
document.body.removeChild(el);
};
reader.readAsBinaryString(el.files[0]);
}
el.click();
}
And use it like this:
pickAndReadFile(data => {
console.log(data)
})
This is an old question but there two main ideas that we have to be clear. Do we want to read the whole file or get it line by line?
Teo, I want to get the whole file and process it later.
Okay that is very easy we just call text (remember that text assumes that the file is encoded as UTF-8) and handle the file like this:
const $output = document.getElementById('output')
const $file = document.getElementById('file')
const fetchFile = async e => {
const [file] = e.target.files
const text = await file.text()
$output.textContent = text
}
$file.onchange = fetchFile
<input id='file' type='file' accept='text/plain'><br>
<pre id='output'>...</pre>
What about line by line? It is possible?.
Well my young Padawan, that is also possible we just need a split the text in lines like this
const $output = document.getElementById('output')
const $file = document.getElementById('file')
let count
const fetchFile = async e => {
const [file] = e.target.files
if (!file) return
count = 0
const text = await file.text()
$output.textContent = text
const lines = text.split(/\r?\n/gm)
for (const line of lines) {
if (line) count++
}
console.log({count})
}
$file.onchange = fetchFile
<input id='file' type='file' accept='text/plain'><br>
<pre id='output'>...</pre>
You can import my library:
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015#gmail.com"></script>
then, the function fetchfile(path) will return the uploaded file
<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>
Please note: on Google Chrome if the HTML code is local, errors will appear, but saving the HTML code and the files online then running the online HTML file works.
In order to read a local file text through JavaScript using chrome, the chrome browser should run with the argument --allow-file-access-from-files to allow JavaScript to access local file, then you can read it using XmlHttpRequest like the following:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var allText = xmlhttp.responseText;
}
};
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
I know, I am late at this party. Let me show you what I have got.
This is a simple reading of text file
var path = "C:\\path\\filename.txt"
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
if (err) throw err;
console.log('OK: ' + filename);
console.log(data)
});
I hope this helps.
I have this JS code for uploading a .jpg file to firebase:
function handleFileSelect(evt) {
var f = evt.target.files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var filePayload = e.target.result;
// Generate a location that can't be guessed using the file's contents and a random number
var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload));
var f = new Firebase(firebaseRef + 'pano/' + hash + '/filePayload');
spinner.spin(document.getElementById('spin'));
// Set the file payload to Firebase and register an onComplete handler to stop the spinner and show the preview
f.set(filePayload, function() {
spinner.stop();
document.getElementById("pano").src = e.target.result;
$('#file-upload').hide();
// Update the location bar so the URL can be shared with others
window.location.hash = hash;
});
};
})(f);
reader.readAsDataURL(f);
}
$(function() {
$('#spin').append(spinner);
var idx = window.location.href.indexOf('#');
var hash = (idx > 0) ? window.location.href.slice(idx + 1) : '';
if (hash === '') {
// No hash found, so render the file upload button.
$('#file-upload').show();
document.getElementById("file-upload").addEventListener('change', handleFileSelect, false);
} else {
// A hash was passed in, so let's retrieve and render it.
spinner.spin(document.getElementById('spin'));
var f = new Firebase(firebaseRef + '/pano/' + hash + '/filePayload');
f.once('value', function(snap) {
var payload = snap.val();
if (payload != null) {
document.getElementById("pano").src = payload;
} else {
$('#body').append("Not found");
}
spinner.stop();
});
}
});
My js imports:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script>
<script src="sha256.js"></script>
<script src="firepano.js"></script>
My html looks something like this:
<input type="file" accept="image/*" capture="camera" id="file-upload">
Of course this is just a piece, but somehow the js function isn't triggered when I select a file, only if I put the HTML code outside of my file in a separate file and leave only this input tag. Is there some other piece of code that can interfier in the selectfile function trigger?
Try this:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="Upload">
</form>