How can I force
this.json = reader.result;
to assign value to this.json properly in given scope?
Because the value is there, but it is not assigned.
<div id="app" >
<label class="text-reader"><input type="file" v-on:change="getFile($event)"></label>
{{ json }} // it's being set to "test" from getFile function.
</div>
Here's VueJS Code
new Vue
({
el: '#app',
data: {
json: {}
},
methods:
{
getFile: function(ev)
{
this.json = "test";
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e)
{
this.json = reader.result;
console.log(this.json); // displays content properly
}
reader.readAsText(file);
}
}
});
What I've been trying so far is just adding some kind of handler
getFile: function(ev)
{
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e)
{
this.callBackHandler(reader.result);
}
reader.readAsText(file);
},
callBackHandler: function(val)
{
console.log(val);
this.json = val;
}
It yells:
TypeError: this.callBackHandler is not a function
Also using callBackHandler as a param.
<label class="text-reader"><input type="file" v-on:change="getFile($event, callBackHandler())"></label>
getFile: function(ev, handler)
{
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(handler)
{
handler(reader.result);
}
reader.readAsText(file);
},
callBackHandler: function(val)
{
console.log(val);
this.json = val;
}
The getFile function should look like this:
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = (e => {
this.callBackHandler(reader.result);
})
}
or
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
var self = this;
reader.onload = function(e){
self.callBackHandler(reader.result);
}
}
or
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e){
this.callBackHandler(reader.result);
}.bind(this)
}
Solution:
v-on:change="getFile($event)"
(...)
reader.onload = (x =>
{
this.callBackHandler(reader.result);
});
Related
I am using below 2 methods but I am unable to get back base64 string from it.
function convertFileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
});
}
function previewProductImages(files){
let preveiwImagesTemplate = [];
for(let i=0; i<files.length; i++ ){
const uploadedImageBase64 = convertFileToBase64(files[i]);
/// WANT BASE64 HERE So I can pass that to another method
}
}
Replacement or better approches are welcome.
You should first assign a handler to the onload property - and then call the readAsDataURL() method, not the opposite.
function readFile(file)
{
return new Promise((resolve) =>
{
if (file.size)
{
const reader = new FileReader();
reader.onload = (e) =>
{
resolve({
binary: file,
b64: e.target.result,
});
};
reader.readAsDataURL(file);
}
});
}
I try to reset filefield after select file with the same name, but it not work:
onUploadPhonesCSV: function (field, value, opts) {
var inputEl = field.fileInputEl.dom,
fileList = inputEl.files;
var file = fileList[0];
var vm = this.getViewModel();
console.log(value);
if (field.isValid()) {
var reader = new FileReader();
reader.onload = function (oFREvent) {
var myCsv = oFREvent.target.result;
vm.set('phones', myCsv);
field.setRawValue("");
};
reader.readAsBinaryString(file);
}
},
Also tried field.reset() it not work.
Help me please.
var image is not defined in alert :( please help , thank you so much!
handleBeforeUpload (file, event) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (function () {
var f = reader.result;
});
var image = f;
alert(image)
var photo = {uri: image}
Your f variable is in scope of onload function callback. Define it outside of that function, where you define your reader variable, so it will be available in scope of handleBeforeUpload function
handleBeforeUpload (file, event) {
var reader = new FileReader();
var photo = null;
reader.readAsDataURL(file);
reader.onload = (function () {
f = reader.result;
photo = { uri: f }
});
}
I want to display the content of a file in a text area.
I use this script to do that but when I click in the open button the text doesn't appear:
function loadFileAsText()
{
document.getElementById("textoNormal").scrollTop=0;
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("textoNormal").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
id=1;
}
textoNormal: is the id of my text area
Read file of content in onChange event of File Upload Control.
function OnUpload() {
var obj = document.getElementById("<%=FleUldLogo.ClientID%>");
var source = obj.value;
var file = obj.files[0];
var textarea=$("#txtar");
var reader = new FileReader();
reader.onloadend = function () {
textarea.value= reader.result;
}
reader.readAsText(file);
return true;
}
I called your function in a jQuery onClick and it worked well,
jquery
$(document).ready(function(){
$('.clickMe').click(function(){
document.getElementById("textoNormal").scrollTop = 0;
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("textoNormal").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
id=1;
});
});
HTML
<textarea id="textoNormal"></textarea>
<input type="file" id="fileToLoad" />
<div class="clickMe">Click To Read Text File</div>
Below is a part of my program.
function displayFile(file) {
document.getElementById("name").textContent = file.fileName;
document.getElementById("size").textContent = file.fileSize;
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById('file-content').innerHTML = "Succeed!";
};
reader.onerror = function(e) {
document.getElementById('file-content').innerHTML = "Unable to read " + file.fileName;
};
reader.readAsDataURL(file);
}
why it always occurs an error?...