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
Remove a Specific String from Url and Redirect
Sum of Numbers in an Array With JavaScript
How to Import a Script into .Vue File
How to Parse Excel (Xls) File in Javascript/Html5
Redirecting to Another Page With JavaScript and Jsp
Exclude Weekends in JavaScript Date Calculation
Chart.Js Showing Time (Hh:Mm:Ss - 24 Hour Clock) on Xaxis
How to Get List of All Timezones in JavaScript
Prevent CSS Tooltip from Going Out of Page/Window
React Router Authenticated Route Is Redirecting When I Refresh the Page
Vuejs Accessing a Method from Another Method
Bootstrap Datepicker Set Default Date Not Working
Updating Value of Multidimensional Array of Object
Why Am I Getting an Expected an Assignment or Function Call and Instead Saw an Expression
Javascript (+) Sign Concatenates Instead of Giving Sum of Variables
What Do Square Brackets Around an Expression Mean, E.G. 'Var X = a + [B]'
How to Check Whether Dynamically Attached Event Listener Exists or Not