I have a file input like this in html
<input type='file' id='textin'></input>
How Do I Get The Contents Of The .txt File Uploaded?
You can do this via FileReader.
function previewFile() {
const content = document.querySelector('.content');
const [file] = document.querySelector('input[type=file]').files;
const reader = new FileReader();
reader.addEventListener("load", () => {
// this will then display a text file
content.innerText = reader.result;
}, false);
if (file) {
reader.readAsText(file);
}
}
<input type="file" onchange="previewFile()" id="textin"><br>
<p class="content"></p>
Related
So in HTML I can do something this:
<input type="file" id="upload" accept="text" multiple/>
Then I can access the files uploaded in JavaScript like this whenever the input changes:
document.getElementById('upload').onchange = function(){
const uFiles = this.files;
console.log(uFiles);
}
How would I go about doing that with ReactJS? So far, I've tried using the same approach I would use for HTML and JavaScript but I get the response that uFiles is undefined rather than a FileList object.
In my React Render:
<input onChange={this.doFunc} id="upload" type="file" accept="text" multiple />
In my React class:
doFunc = () => {
const uFiles = this.files;
console.log(uFiles);
}
I think you have to use event.
doFunc = e => {
const uFiles = e.target.files;
console.log(uFiles);
}
function handleUploadChange(e)
{
const file = e.target.files[0];
if ( !file )
{
return;
}
const reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = () => {
console.log(reader.result);
console.log(file.type);
};
reader.onerror = function () {
console.log("error on load image");
};
}
How to get Base64 from an input file type:pdf?. i´m trying convert a file .pdf in string base64 with JavaScript.
Example:
var base64 = funtionconvertBase64(file);
function funtionconvertBase64(file){
....
....
return stringbase64
}
You have to load the file using the FileReader.
<input id="loadFile" type="file" onchange="readAsBase64()" />
<script type="text/javascript">
function readAsBase64() {
var files = document.getElementById("loadFile").files;
if (files.length > 0) {
var fileToLoad = files[0];
var fileReader = new FileReader();
var base64File;
// Reading file content when it's loaded
fileReader.onload = function(event) {
base64File = event.target.result;
// base64File console
console.log(base64File);
};
// Convert data to base64
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
With the HTML File API we can get a file selected via an <input type="file"> element with var file = evt.target.files[0];.
How do we get the file content as a string (Something like var content = file.toString().
I currently have this code which gets triggered by the input element.onchange event:
input.onchange = function handleFileSelect(evt) {
var file = evt.target.files[0];
var reader = new FileReader();
console.log("RAW FILE: ", file);
var string = reader.readAsText(file);
console.log("FILE CONTENT: ", string);
}
When I select a file I try to log the contents this happens:
RAW FILE: File
bundle.js:5293 FILE CONTENT: undefined
Thoughts?
Turns out a file cannot just be read synchronously like this:
var reader = new FileReader();
content = reader.readAsText(file);
Before we can read the file we first have to attach to the onload event on the file reader.
reader.onload = (e) => {
let content = e.target.result;
console.log("FILE CONTENT: ", content);
}
The trigger the file read:
reader.readAsText(file);
The content will now contain the file content.
Here is my html code:
<input id="file" type="file">
<div id="preview">Preview</div>
and JavaScript Codes:
function handleFileSelect(evt) {
var file = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').innerHTML = e.target.result;
};
reader.readAsText(file);
};
document.getElementById('file').addEventListener('change',handleFileSelect, false);
fiddle : https://jsfiddle.net/8te1hyv9/4/
I am trying to load an external html file from my local drive into the div id preview. Its Working fine only with image src url are on server..
How to display the image from local drive into the preview.Is this possible to convert the image url to base 64 when importing the html file.
I want to read string from text file and save it in variable . What I did:
HTML:
<div>
Select a text file:
<input type="file" id="fileInput">
</div>
<pre id="fileDisplayArea"><pre>
JS:
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
var newString;
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerText = reader.result;
}
newString=reader.result; //SAVE RESULT
alert(newString);
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
}
I want to save text from file and alert it. But it doesnt work.
I did it:
var tfile;
var reader = new FileReader();
function rdfile(files)
{
tfile = files[0];
reader.readAsText(tfile, 'CP1251');
reader.onload = function(e)
{
str = e.target.result;
alert(str);
};
}
But it doesnt work too. I alert many different symbols but not my text.
Look at your code from your first attempt:
newString=reader.result; //SAVE RESULT
alert(newString);
reader.readAsText(file);
Get the result
Alert it
Do the thing that generates the result
You have to read the file before you can look at the text you get from reading it!
Move steps 1 and 2 in to the onload event handler you already have.
Now look at your second attempt. You never call rdfile and you never call readAsText.