I have created a form where it asks user to upload his/her photo. But i am not able to save encoded value of my image. I want to save this value in a variable. I am not getting why my value is not getting saved in 'result' variable.
<html>
<body>
<input type="file" id="inp"/>
<img id="img" />
<div id="b64"></div>
<script type="text/javascript">
function EL(id) { return document.getElementById(id); }
function readFile() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.onload = function(e) {
EL("img").src = e.target.result;
EL("b64").innerHTML = e.target.result;
};
var result = FR.readAsDataURL( this.files[0] );
console.log(result);
}
}
EL("inp").addEventListener("change", readFile, false);
</script>
</body>
</html>
Because event onload runs asynchronously, and you try to access the value synchronously, which result to undefined
move your logic inside onload, or if you want synchronous code style use promises instead.
<html>
<body>
<input type="file" id="inp"/>
<img id="img" />
<div id="b64"></div>
<script type="text/javascript">
function EL(id) { return document.getElementById(id); }
function readFile() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.onload = function(e) {
EL("img").src = e.target.result;
EL("b64").innerHTML = e.target.result;
//put your code here
console.log(e.target.result);
};
FR.readAsDataURL( this.files[0] );
}
}
EL("inp").addEventListener("change", readFile, false);
</script>
</body>
</html>
Related
I have a chat app built with socket.io and node.js. I have a function below for reading the file from the input and sending it to the server as a base64 string.
function readURL() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.onload = function(e) {
$("img").attr("src", e.target.result);
socket.emit('image', e.target.result);
console.log(e.target.result);
};
FR.readAsDataURL( this.files[0] );
}
};
My HTML is as follows:
<input id="file" type='file' onchange="readURL()"/>
<img id="img">
However, upon uploading a file, nothing happens. No errors are recorded, and nothing is even logged to the console. Why is this so?
If the code you showed is all there is, then this will fix it
You need to pass a reference from the input's onchange method, here done using this and then add a parameter to the function, here done using el
Note, as this is a valid javascript operator, no error will be generated in your original code snippet.
You can read more about this here: JavaScript/Reference/Operators/this
function readURL(el) {
if (el.files && el.files[0]) {
var FR= new FileReader();
FR.onload = function(e) {
$("img").attr("src", e.target.result);
socket.emit('image', e.target.result);
console.log(e.target.result);
};
FR.readAsDataURL( el.files[0] );
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file" type='file' onchange="readURL(this)"/>
<img id="img">
You are accessing selected file in wrong object.
If you have below html
<input id="file" type='file' onchange="readURL()"/>
then to get the file object in "readURL" method, try this:
var file = (((this.file || {}).files || [])[0]);
#Hundotte .. hope it will help you.
This question already has answers here:
getElementById() returns null even though the element exists [duplicate]
(5 answers)
Closed 6 years ago.
Why am I getting this error? This should work, what I'm trying to do is when someone selects the form on the upload the image file. Thanks
The error I keep getting is
<html>
<body>
<script type="text/javascript">
function EL(id) { return document.getElementById(id); } // Get el by ID helper function
function readFile() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.onload = function(e) {
EL("img").src = e.target.result;
EL("b64").innerHTML = e.target.result;
};
FR.readAsDataURL( this.files[0] );
}
}
EL("inp").addEventListener("change", readFile, false);
</script>
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img">
</body>
</html>
But it was not working fine
Put your JavaScript in the below of the body.
It throws error because your JavaScript first works when your DOM doesn't ready.
And it is a good practice to load all scripts at the end of the body
<html>
<body>
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img">
<script type="text/javascript">
function EL(id) { return document.getElementById(id); } // Get el by ID helper function
function readFile() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.onload = function(e) {
EL("img").src = e.target.result;
EL("b64").innerHTML = e.target.result;
};
FR.readAsDataURL( this.files[0] );
}
}
EL("inp").addEventListener("change", readFile, false);
</script>
</body>
</html>
I want to read a local binary file. So, I do this
var file = new File([""], url);
var reader = new FileReader();
reader.onload = function () {
parse(reader.result);
}
reader.readAsArrayBuffer(file);
where url is a filepath like url="c:\temp\myfile.bin"
I don't have any errors, but something is wrong, because all data from my app disappear. What could be wrong ? Any ideas ?
Thanks!
I guess you have to use input type="file" for security reasons.
Here's a working example. For convenience it shows the opened file in the same browser window.
<html>
<body>
<script>
function readFile() {
var reader = new FileReader();
file = document.getElementById("uploadText").files[0];
reader.onload = function (ev) {
document.getElementById("obj").data = ev.target.result;
// parse(ev.target.result);
};
reader.readAsDataURL(file);
// reader.readAsArrayBuffer(file);
};
</script>
<div>
<input id="uploadText" type="file" onchange="readFile();" />
</div>
<object id="obj" data="" />
</body>
</html>
I have a form that allows users to upload x amount of image. When they choose the images from their computer, there is a button that they can click, which allows them to preview the images before submitting the form.
Is there a way to show the images automatically without having to click a Preview button. At the moment, I am using the JS .click function, but I would rather that users didn't have to click anything to see what images they uploaded.
Here is the code I am using.
In the form:
<div class="uploadWrapper">
<p>Upload Images</p>
<input type="file" name="files[]" multiple="true" id="files" style="left: 0px;" />
</div>
<input id="go" class="btn_img" type="button" value="Click to Preview Images">
<div id="images_upload"></div>
<script type="text/javascript">
$("#files").click(function(){
$(".btn_img").show();
});
</script>
<?php include_once('upload/image-preview.php'); ?>
The image-preview.php file:
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#up_image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file").change(function(){
readURL(this);
});
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
reader.onloadend = function(e) {
var image = $('<img class="prev_img">').attr('src', e.target.result);
$(image).appendTo('#images_upload');
$( "#images_upload img" ).wrap( "<div class=\"an_image\">" );
if (i < numFiles) {
i++;
readFile();
}
};
$('#go').click(function() {
imageFiles = document.getElementById('files').files
numFiles = imageFiles.length;
readFile();
});
</script>
What would I need to do to not have to click the 'Click to Preview Images' button to see the images?
Thanks!
Loop through the input.files and create a new FileReader() for each file. jsFiddle Demo
HTML
<input type='file' class="imageUpload" multiple="true" />
<div class="imageOutput"></div>
JS
$images = $('.images');
$(".imageUpload").change(function(){
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
$.each(input.files, function() {
var reader = new FileReader();
reader.onload = function (e) {
$images.append('<img src="'+ e.target.result+'" />')
}
reader.readAsDataURL(this);
});
}
}
Thanks #Brian
This is what I came up with. The limit is 10.
$images = $('#images_upload')
$(".imageUpload").change(function(event){
readURL(this);
});
function readURL(input) {
if (input.files[10]) {
alert('You can uploaded a maximum of 10 images');
} else {
if (input.files && input.files[0]) {
$.each(input.files, function() {
var reader = new FileReader();
reader.onload = function (e) {
$images.append('<img src="'+ e.target.result+'" />')
}
reader.readAsDataURL(this);
});
}
}
}
I am trying to load a text file into my JavaScript file and then read the lines from that file in order to get information, and I tried the FileReader but it does not seem to be working. Can anyone help?
function analyze(){
var f = new FileReader();
f.onloadend = function(){
console.log("success");
}
f.readAsText("cities.txt");
}
Yeah it is possible with FileReader, I have already done an example of this, here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Read File (via User Input selection)</title>
<script type="text/javascript">
var reader; //GLOBAL File Reader object for demo purpose only
/**
* Check for the various File API support.
*/
function checkFileAPI() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
reader = new FileReader();
return true;
} else {
alert('The File APIs are not fully supported by your browser. Fallback required.');
return false;
}
}
/**
* read text input
*/
function readText(filePath) {
var output = ""; //placeholder for text output
if(filePath.files && filePath.files[0]) {
reader.onload = function (e) {
output = e.target.result;
displayContents(output);
};//end onload()
reader.readAsText(filePath.files[0]);
}//end if html5 filelist support
else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX
try {
reader = new ActiveXObject("Scripting.FileSystemObject");
var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object
output = file.ReadAll(); //text contents of file
file.Close(); //close file "input stream"
displayContents(output);
} catch (e) {
if (e.number == -2146827859) {
alert('Unable to access local files due to browser security settings. ' +
'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
}
}
}
else { //this is where you could fallback to Java Applet, Flash or similar
return false;
}
return true;
}
/**
* display content using a basic HTML replacement
*/
function displayContents(txt) {
var el = document.getElementById('main');
el.innerHTML = txt; //display output in DOM
}
</script>
</head>
<body onload="checkFileAPI();">
<div id="container">
<input type="file" onchange='readText(this)' />
<br/>
<hr/>
<h3>Contents of the Text file:</h3>
<div id="main">
...
</div>
</div>
</body>
</html>
It's also possible to do the same thing to support some older versions of IE (I think 6-8) using the ActiveX Object, I had some old code which does that too but its been a while so I'll have to dig it up I've found a solution similar to the one I used courtesy of Jacky Cui's blog and edited this answer (also cleaned up code a bit). Hope it helps.
Lastly, I just read some other answers that beat me to the draw, but as they suggest, you might be looking for code that lets you load a text file from the server (or device) where the JavaScript file is sitting. If that's the case then you want AJAX code to load the document dynamically which would be something as follows:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Read File (via AJAX)</title>
<script type="text/javascript">
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('get', 'test.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('main');
el.innerHTML = reader.responseText;
}
}
</script>
</head>
<body>
<div id="container">
<input type="button" value="test.txt" onclick="loadFile()" />
<div id="main">
</div>
</div>
</body>
</html>
This can be done quite easily using javascript XMLHttpRequest() class (AJAX):
function FileHelper()
{
FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom)
{
var request = new XMLHttpRequest();
request.open("GET", pathOfFileToReadFrom, false);
request.send(null);
var returnValue = request.responseText;
return returnValue;
}
}
...
var text = FileHelper.readStringFromFileAtPath ( "mytext.txt" );
Javascript doesn't have access to the user's filesystem for security reasons. FileReader is only for files manually selected by the user.
(fiddle:
https://jsfiddle.net/ya3ya6/7hfkdnrg/2/ )
Usage
Html:
<textarea id='tbMain' ></textarea>
<a id='btnOpen' href='#' >Open</a>
Js:
document.getElementById('btnOpen').onclick = function(){
openFile(function(txt){
document.getElementById('tbMain').value = txt;
});
}
Js Helper functions
function openFile(callBack){
var element = document.createElement('input');
element.setAttribute('type', "file");
element.setAttribute('id', "btnOpenFile");
element.onchange = function(){
readText(this,callBack);
document.body.removeChild(this);
}
element.style.display = 'none';
document.body.appendChild(element);
element.click();
}
function readText(filePath,callBack) {
var reader;
if (window.File && window.FileReader && window.FileList && window.Blob) {
reader = new FileReader();
} else {
alert('The File APIs are not fully supported by your browser. Fallback required.');
return false;
}
var output = ""; //placeholder for text output
if(filePath.files && filePath.files[0]) {
reader.onload = function (e) {
output = e.target.result;
callBack(output);
};//end onload()
reader.readAsText(filePath.files[0]);
}//end if html5 filelist support
else { //this is where you could fallback to Java Applet, Flash or similar
return false;
}
return true;
}
my example
<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 is an old question but I think in 2022 there are ES6 ways to handle this:
const $node = document.getElementById('output')
const $file = document.getElementById('file')
const processTextByLine = text => {
const arr = text.split(/\r?\n/gm)
arr.map(line => console.log(line))
}
const openFile = event => {
const input = event.target
if (!input) throw new Error('null input')
const [first] = input.files
const reader = new FileReader()
reader.onload = () => {
const text = reader.result
$node.innerText = text
processTextByLine(text)
}
reader.readAsText(first)
}
$file.onchange = openFile
<input id='file' type='file' accept='text/plain'><br>
<div id='output'>
...
</div>
If your file is encoded using UTF-8 then we can make an async call using Blob.text()
const $node = document.getElementById('output')
const $file = document.getElementById('file')
const processTextByLine = text => {
const arr = text.split(/\r?\n/gm)
arr.map(line => console.log(line))
}
const openFile = async event => {
const input = event.target
if (!input) throw new Error('null input')
const [file] = input.files
const text = await file.text()
$node.innerText = text
processTextByLine(text)
}
$file.onchange = openFile
<input id='file' type='file' accept='text/plain'><br>
<div id='output'>
...
</div>
Note:
processTextByLine() function is not needed, it just shows a case if we need to process the file line by line.