Javascript FileReader how can I access reader.onload? - javascript

I am currently learning Javascript. I'm working on a program with FileReader.
How can I access variable file for variable perf?
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>FileReader</title>
</head>
<body>
<h1>FileReader</h1>
<input type='file' accept='text/plain' onchange='openFile(event)'><br>
Input: <input type="text" id="qi" value="">
<br></br>
<button onclick="check()" class="button buttonB">Check</button>
<p id="ans"></p>
<p id=".same"></p>
<script src="main.js"></script>
</body>
</html>
function check(){
var text = document.getElementById("qi").value;
console.log(`Text: ${text}`);
var perf; //The value should be `file`
if (text === perf){
console.log("Same");
document.getElementById(".same").innerHTML = "Same";
} else{
console.log("Not Same!!!")
document.getElementById(".same").innerHTML = "Not Same!!!";
}
}
function openFile(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var file = reader.result;
console.log(file);
document.getElementById("ans").innerHTML = file;
};
reader.readAsText(input.files[0]);
};

Method 1 : Compare the innerHTML you saved
var perf = document.getElementById("ans").innerHTML;
Method 2 : Save the variable in a global scope
Just save the variable file in the global scope :
Replace
var file = reader.result;
By
window.file = reader.result;
And
if (text === perf){
By
if (text === window.file){

Related

How can I output multiple lines of a text file in HTML using JS?

This is only the section of the code that I can't solve. The idea is that I open the text file, which I can do, and then I output each line in the div with the id cont. when I open the text file nothing gets output. I don't know why.
<head>
<title>Read Text File</title>
</head>
<body>
<input type="file" name="file" id="file" />
<br>
<div id ="cont"></div>
<script>
document.getElementById('file').onchange = function()
{
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent)
{
var fileContentArray = this.result.split(/\r\n|\n/);
for(var line = 0; line < lines.length-1; line++)
{
document.getElementById("cont").innerHTML = lines[line];
}
}
reader.readAsText(file);
}
</script>
</body>
</html>

d3.js JSON read with file selection dialog box

I can read file in the same folder than the script js, but not in another folder.
HTML part:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<button class="mybutton" id="fileSelect">Select a file</button>
<script src="https://d3js.org/d3.v3.min.js"></script>
or
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
</html>
D3.JS part:
var element = document.createElement('div');
element.innerHTML = '<input type="file" accept=".json">';
var fileInput = element.firstChild;
var fileSelect = document.getElementById("fileSelect");
fileInput.addEventListener('change', function() { // wait for file selection
var file = fileInput.files[0];
var file_name = file.name;
// load the data
d3.json(file_name, function(error, graph) {
do_things;
}
});
fileSelect.addEventListener("click", function () { // wait for click on "select a file" button
fileInput.click();
});
Where is my error?
Thank you in advance

clone a image and then rename it using javascript

I want to rename my image captured using camera at client side using javascript. I know it is not directly possible due to security reasons.
I already did it in server side but I need to rename my image before uploading to server. Can I make a copy of image and then rename it? If I can, how would I do it?
This is my javascript file
var oFile = new File([""],"");
var clonedImage = new Image();
//cloning function
function cloneImage ()
{
alert("cloning1");
clonedImage.name = oFile.name;
document.getElementById("image_file").appendChild( clonedImage);
alert("cloning2");
alert("success" +clonedImage.name );
}
function fileSelected()
{
// get selected file element
oFile = document.getElementById('image_file').files[0];
// filter for image files
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (! rFilter.test(oFile.type)) {
alert("Not a proper file format");
return;
}
cloneImage();
alert("cloning");
var oReader = new FileReader();
oReader.readAsDataURL(oFile);
alert("success = "+oFile.name);
alert("success = "+oFile.type);
}
function startUploading()
{
var formdata = new FormData(document.getElementById("upload_form"));
var imageName = oFile.name;
formdata.append("image1",oFile);
var request = new XMLHttpRequest();
request.open('POST', 'http://10.182.xx.xx/upload.php',true);
alert("start uploading");
alert("success ="+oFile.name);
request.send(formdata);
alert("finished");
}
This is my html file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<link href="file:///android_asset/main.css" rel="stylesheet" type="text/css" />
<script src="file:///android_asset/script.js" type ="text/javascript"> </script>
</head>
<body>
<form id="upload_form" enctype="multipart/form-data" method="POST" action="upload.php">
<div>
<div><label for="image_file">Please select image file</label></div>
<div><input type="file" name="image_file" id="image_file" onchange="fileSelected()" /></div>
</div>
<div>
<input type="button" name="image1" id="image1" value="Upload" onclick="startUploading()"/>
</div>
</form>
</body>
</html>

How do you read a local file on your PC and update it constantly in javascript?

So, I've made a java program that runs through a list of IPs, pings them, and updates a file on the devices status. I want to know how to open the file into a webpage and update it, so a user can open the webpage and just see a list of data from the file, they don't have to select the file or refresh the page.
Is this feasible to do with javascript/html?
This is the code I'm working with so far:
<html>
<head>
<title>Import Data</title>
<script>
var openFile = function() {
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]);
setTimeout(openFile(),1000);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='openFile()'><br>
<div id='output'>
</body>
</html>
But I can't seem to hunt down where to hardcode the path to the file in. When I use this manual selection method, it'll update once, whether the file increases in elements or decreases.
EDIT:
I've narrowed it down to where the file needs to be uploaded:
<html>
<head>
<title></title>
<script>
function uploadFile() {
var reader = new FileReader();
reader.onload = function(event) {
var contents = event.target.result;
console.log("File contents: " + contents);
};
reader.onerror = function(event) {
console.error("File could not be read! Code: " + event.target.error.code);
};
var fileInputElement = document.getElementById("FileName");
reader.readAsText(fileInputElement.files[0]);
console.log(fileInputElement.files[0]);
}
</script>
</head>
<body>
<input type='file' accept='text/plain' value='RESULTS.txt' id='FileName' onchange='uploadFile()' style="display:none;">
</body>
</html>
If I try to type just a file path in a string, it complains it's not type 'blob'. When I do this, it requires the user to enter a file name, but obviously it can't be seen. How can I make that 'file' variable a static variable so it always opens a that file without prompting the user?
Doing some more research, it's security reasons as to why you can't access a file from the local computer.
So, in lieu of all that, I made some code that will constantly load the selected file so you can see whenever it changes:
<html>
<head>
<title>Import Data</title>
<script>
var input;
var openFile = function() {
var reader = new FileReader(event);
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]);
setTimeout(openFile,1000);
};
</script>
</head>
<body>
<input type='file' accept='text/plain' onchange='input = event.target; openFile(event);'><br>
<div id='output'>
</body>
</html>

HTML5 Reading File

I am trying to develop an application where it allows the user to choose a file and then read it and display the text on the screen.
My code can be found here: http://jsfiddle.net/5sy076n5/1/.
<html>
<head>
<title>FileReader Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function testRead() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Read <a onClick="testRead();">File</a></p>
</body>
</html>
You may notice that I don't have an input tag inside the body. This is because I want the user to click on the tag rather than the text.
My problem is what I am suppose to do after fileSector.click();? How can I get what file was chosen?
You have already created the input element on runtime and you have the reference of it fileSelector
You can simply use this variable to FileReader API
function testRead() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
fileSelector.addEventListener('change', function () {
var file = fileSelector.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var text = reader.result;
console.log(text); // Select *.txt file and see console
}
reader.readAsText(file);
});
}
DEMO

Categories

Resources