Filereader Onload With Result and Parameter

FileReader onload with result and parameter

Try wrapping your onload function in another function. Here the closure gives you access to each file being processed in turn via the variable f:

function openFiles(evt){
var files = evt.target.files;

for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];

var reader = new FileReader();

reader.onload = (function(f) {
return function(e) {
// Here you can use `e.target.result` or `this.result`
// and `f.name`.
};
})(file);

reader.readAsText(file);
}
}

For a discussion of why a closure is required here see these related questions:

  • JavaScript closure inside loops – simple practical example
  • Javascript infamous Loop issue?

Pass a parameter to FileReader onload event

Try the following:

var reader = new FileReader();
reader.onload = (function(theFile){
var fileName = theFile.name;
return function(e){
console.log(fileName);
console.log(e.target.result);
};
})(currFile);
reader.readAsText(currFile);

Here, you're creating a new fileName variable each time a file is passed to the outer method. You're then creating a function which has access that variable (due to the closure) and returning it.

FileReader onLoad not fireing

You do not tell it what to read. I assume it is an image from the naming so you would use readAsDataURL

const imageSelected = (ev) => {
const file = ev.target.files && ev.target.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener("load", function () {
cosole.log(reader.result);
}, false);
reader.readAsDataURL(file);
}
}

running example

const inp = document.querySelector('[type="file"]');
const img = document.querySelector('img');

const imageSelected = (ev) => {
const file = ev.target.files && ev.target.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener("load", function () {
img.src = reader.result;
}, false);
reader.readAsDataURL(file);
}
}

inp.addEventListener("change", imageSelected);
<input type="file">
<img >

Using a return value from a FileReader's onload function

You can use a callback function to return your response

checkDumpVersion(file: File, vcVersion: string, callback): boolean{

let reader = new FileReader(); reader.readAsText(file);

reader.onload = function(e){
let firstLine = reader.result.toString().split(/\r\n|\n/).shift();
let tokens = firstLine.split(/(\s+)/).filter( e => e.trim().length > 0)
let version = tokens[tokens.indexOf('VERSION') + 1];

if(version !== VC_TO_DUMP[vcVersion]){
console.log(STATUS['versionValidationError']);
// need to return false here.
callback(false)
}
}
return true;
}

checkDumpVersion(file, vcVersion, (data)=> {
console.log(data)
})

FileReader.onload never fired in angular

i thing you seem forgetten to read file...

fileChange(event) {
let fileList: FileList = event.target.files;
var file = fileList[0];
var reader = new FileReader();
reader.onload = this._handleReaderLoaded.bind(this);
reader.readAsArrayBuffer(file);
}


Related Topics



Leave a reply



Submit