I have a for loop iterating over the number of files
I have to read the first line of each file and add it let's say to a Map having File name as the key and First line of that file as a the value.
I am using FileReader to read the file but it is asynchronous.
When I open a stream to read the file the loop gets incremented before I am done with reading the file and adding my desired entry to the map.
I need a synchronous operation i.e. Read the First line , add it to the Map and then increment the loop and proceed with the next file.
for (var i = 0; i < files.length; i++){
var file = files[i];
var reader = new FileReader();
reader.onload = function(progressEvent){
var lines = progressEvent.target.result.split('\n');
firstLine = lines[0];
alert('FirstLine'+firstLine);
//add to Map here
}
reader.readAsText(file);
}
How to modify the code so as to achieve the above mentioned functionality.
You can use promises and let them run in the order you create them using reduce.
The below code shows how it could be done this way, and you can take a look at this simple JSFiddle that demos the idea.
//create a function that returns a promise
function readFileAndAddToMap(file){
return new Promise(function(resolve, reject){
var reader = new FileReader();
reader.onload = function(progressEvent){
var lines = progressEvent.target.result.split('\n');
firstLine = lines[0];
console.log('FirstLine'+firstLine);
//add to Map here
resolve();
}
reader.onerror = function(error){
reject(error);
}
reader.readAsText(file);
});
}
//create an array to hold your promises
var promises = [];
for (var i = 0; i < files.length; i++){
//push to the array
promises.push(readFileAndAddToMap(files[i]));
}
//use reduce to create a chain in the order of the promise array
promises.reduce(function(cur, next) {
return cur.then(next);
}, Promise.resolve()).then(function() {
//all files read and executed!
}).catch(function(error){
//handle potential error
});
I was facing the same issue, what I did was I removed the for loop and used recursive function instead. That way, I was able to handle the sequence of FileReader.
Below I tried to modify your code based on my logic. feel free to ask any question in comments if you need more clarity.
attachmentI = { i: files.length };
function UploadMe() {
attachmentI.i--;
if(attachmentI.i > -1){
var file = files[attachmentI.i];
var reader = new FileReader();
reader.onload = function(progressEvent){
var lines = progressEvent.target.result.split('\n');
firstLine = lines[0];
alert('FirstLine'+firstLine);
//add to Map here
UploadMe();
}
reader.readAsText(file);
}
Related
I need to convert an excel file with multiple work sheets to json, and I found the following script to do so. However it just console logs each sheet and I want a way to have an array and each element in the array be a sheet. I have tried initializing an array and pushing oJS to the array every time the forEach runs but it doesn't work :(
function filePicked(oEvent) {
// Get The File From The Input
var oFile = oEvent.target.files[0];
var sFilename = oFile.name;
// Create A File Reader HTML5
var reader = new FileReader();
// Ready The Event For When A File Gets Selected
reader.onload = function(e) {
var data = e.target.result;
var cfb = XLS.CFB.read(data, {type: 'binary'});
var wb = XLS.parse_xlscfb(cfb);
// Loop Over Each Sheet
wb.SheetNames.forEach(function(sheetName) {
// Obtain The Current Row As CSV
var sCSV = XLS.utils.make_csv(wb.Sheets[sheetName]);
var oJS = XLS.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
$("#my_file_output").html(sCSV);
console.log(oJS)
});
};
// Tell JS To Start Reading The File.. You could delay this if desired
fileOut += reader.readAsBinaryString(oFile);
console.log(fileOut);
}
I have the following code in which I'm trying to read a file using FileReader and put its contents in an array. Only after all the data has been pushed do I want to continue. Here's what I have currently:
const confirm = () => {
var reader = new FileReader();
let images = [];
reader.onload = function(e) {
images.push(e.target.result);
};
reader.readAsDataURL(formValues.images[0].file);
console.log('images base 64');
console.log(images); // this prints the empty array.
};
I want to continue on only after images have been updated with the file contents. How can I do that?
-- edit --
I want to in fact add multiple files to the array, so I tried the following.
var reader = new FileReader();
let images = [];
reader.onload = function(e) {
images.push(e.target.result);
console.log('images base 64');
console.log(images);
};
for (let i = 0; i < formValues.images.length; i++) {
reader.readAsDataURL(formValues.images[i].file);
}
But this gives the error "InvalidStateError: The object is in an invalid state."
You are trying to the result before it load. Move the console.log(images) inside onload function.
const confirm = () => {
var reader = new FileReader();
let images = [];
reader.onload = function(e) {
images.push(e.target.result);
console.log(images);
};
reader.readAsDataURL(formValues.images[0].file);
console.log('images base 64');
};
it works for me try like this , surly
this.file64=[];
reader.onloadend =(e) =>{
var result = reader.result;
console.log(result)
this.file64.push(result)
};
I'm passing image files from XMLHttpRequest to this function readfiles(files) by using dataTransfer
what i'm trying to do is to preview the images and the image file names at the same time and in one line code inside the reader.onload() function.
and because there will be more than 1 file passed to the function, i threw them into a for loop
the problem is when i try to preview the images by readDataURL it's ok but the file names cannot be previewed i think because the reader.onload() function stopped the for loop from looping trough the image files.
Here's my code
function readfiles(files) {
var x;
for(x = 0; x < files.length; x = x + 1) {
var reader = new FileReader();
reader.readAsDataURL(files[x]);
reader.onload = function(e) {
console.log(e.target.result);
console.log(files[x].name);
}
}
}
have been searching for solution about 5 hours now, any help!
ROX's answer is not right. In his case, you will see that it will output the same file name 4 times. What you need is a closure which will essentially keep the right context on each iteration. You can achieve this as follows. Check the fiddle http://jsfiddle.net/cy03fc8x/.
function readfiles(files) {
for(x = 0; x < files.length; x = x + 1) {
var file = files[x];
(function(file){ //this is a closure which we use to ensure each iteration has the right version of the variable 'file'
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
console.log(e.target.result);
console.log(file.name);
}
})(file); //on each iteration, pass in the current file to the closure so that it can be used within
}
}
Because onload will run later, at that moment, the x is one more than your number of files. For example if you have 4 files, the x will be 5 when the onload executes.
So keep a reference to your current file:
function readfiles(files) {
for (var x = 0; x < files.length; x = x + 1) {
// keep reference to current file on iteration
var file = files[x];
// create closure and execute it
(function (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
console.log(file.name);
}
}(file)); // pass the `file` to the function
}
}
I'm simply trying to use FileReader to display image files, however when I try to use more than 1 image, I get the following "InvalidStateError: DOM Exception 11". In firefox, however, it works fine.
Here's my code
function addImages(images)
{
var reader=new FileReader()
reader.onload=function()
{
$("#images").append('<img src="'+this.result+'"/><br/>')
}
for(var count=0;count<images.length;count++)
{
reader.readAsDataURL(images[count])
}
}
function uploadImagesToBrowser(e)
{
addImages(e.target.files)
}
$("#imagefiles").on("change",uploadImagesToBrowser)
Unfortunately doesn't work. As mentioned by janje you will need to create a new FileReader per iteration. Also remember to create a closure when binding the event handler, due to the "creating functions in a loop" problem in JavaScript.
Eric Bidelman's post is a rather good source:
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
You have to create a new FileReader (and a new variable to store it in) for every iteration using readAsDataURL.
I'm using FileReader API to read files on local.
<input type="file" id="filesx" name="filesx[]" onchange="readmultifiles(this.files)" multiple="" />
<script>
function readmultifiles(files) {
var ret = "";
var ul = document.querySelector("#bag>ul");
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < files.length; i++) //for multiple files
{
var f = files[i];
var name = files[i].name;
alert(name);
var reader = new FileReader();
reader.onload = function(e) {
// get file content
var text = e.target.result;
var li = document.createElement("li");
li.innerHTML = name + "____" + text;
ul.appendChild(li);
}
reader.readAsText(f,"UTF-8");
}
}
</script>
If input includes 2 files:
file1 ---- "content1"
file2 ---- "content2"
I get this output:
file2__content1
file2__content2
How to fix code to display:
file1__content1
file2__content2
The problem is you're running the loop now but the callbacks you are setting are getting run later (when the events fire). By the time they run, the loop is over and remains at whatever the last value was. So it will always show "file2" in your case for the name.
The solution is to put the file name inside a closure with the rest. One way to do this is create an immediately-invoked function expression (IIFE) and pass the file in as a parameter to that function:
for (var i = 0; i < files.length; i++) { //for multiple files
(function(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
// get file content
var text = e.target.result;
var li = document.createElement("li");
li.innerHTML = name + "____" + text;
ul.appendChild(li);
}
reader.readAsText(file, "UTF-8");
})(files[i]);
}
Alternately, you can define a named function and call it as normal:
function setupReader(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
// get file content
var text = e.target.result;
var li = document.createElement("li");
li.innerHTML = name + "____" + text;
ul.appendChild(li);
}
reader.readAsText(file, "UTF-8");
}
for (var i = 0; i < files.length; i++) {
setupReader(files[i]);
}
Instead of using var, use let as the declared variable only be used in one loop.
for (let i = 0; i < files.length; i++) //for multiple files
{
let f = files[i];
let name = files[i].name;
alert(name);
let reader = new FileReader();
reader.onload = function(e) {
// get file content
let text = e.target.result;
let li = document.createElement("li");
li.innerHTML = name + "____" + text;
ul.appendChild(li);
}
reader.readAsText(f,"UTF-8");
}
Edit: Just use let instead of var in the loop. That fixes the issue OP had (but was only introduced in 2015).
Old answer (An interesting workaround):
While it is not exactly robust or future-proof, it is worth mentioning that this can also be achieved by adding a property to the FileReader object:
var reader = new FileReader();
reader._NAME = files[i].name; // create _NAME property that contains filename.
Then access it through e within the onload callback function:
li.innerHTML = e.target._NAME + "____" + text;
Why this works:
Even though the reader variable is replaced multiple times during the loop like i, the new FileReader object is unique and remains in memory. It is accessible within the reader.onload function through the e argument. By storing additional data in the reader object, it is kept in memory and accessible through reader.onload via e.target event argument.
This explains why why your output is:
file2__content1file2__content2
and not:
file1__content1file2__content2
The content is displayed correctly because e.target.result is a property within the FileReader object itself. Had FileReader contained a filename property by default, it could have been used and this whole mess avoided entirely.
A word of caution
This is called extending host objects (if I understand the difference between native objects...). FileReader is the host object that is being extended in this situation. Many professional developers believe doing this is bad practice and/or evil. Collisions may occur if _NAME ever becomes used in the future. This functionality isn't documented in any specification so it could even break in the future, and it may not work in older browsers.
Personally, I have not encountered any issues by adding additional properties to host objects. Assuming the property name is unique enough, browsers don't disable it, and future browsers don't change these objects too much, it should work fine.
Here are some articles that explain this quite well:
http://kendsnyder.com/extending-host-objects-evil-extending-native-objects-not-evil-but-risky/
http://perfectionkills.com/whats-wrong-with-extending-the-dom/
And some article on the problem itself:
http://tobyho.com/2011/11/02/callbacks-in-loops/
You can make a promise/callback for reading the file in the loop.
Promise-
fileBase64(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
resolve(reader.result);
};
reader.onerror = function(error) {
reject(error);
};
});
}
I am calling this function on onClick
onClick = async () => {
for (var i = 0; i < this.state.company_bank_statement_array.length; i++) {
let file = document.getElementById(
this.state.company_bank_statement_array[i]
);
let fileData = await this.fileBase64(file.files[0]);
this.state.bankStatements.push({
data: fileData,
filename: file.files[0].name,
});
}
};
I had the same problem, solved it by using Array.from
let files = e.target.files || e.dataTransfer.files;
Array.from(files).forEach(file => {
// do whatever
})
I think the best way to solve this problem is by recursively call a function that reads the blob file. So in my case I solve the problem with the following snippet code, maybe is a little complicated but it works in any scenario that I tried.
Notice that, I didn't pass the array and index as arguments. You need to call them with the object they belong to.
//Initialize blobs
var foo = new Blob(["Lorem ipsum dolor sit amet, consectetur adipiscing elit."], {
type: 'text/plain'
});
var bar = new Blob(["Sed tristique ipsum vitae consequat aliquet"], {
type: 'text/plain'
});
//Initialize array and index
var arrayOfBlobs = [foo, bar];
var arrayIndex = 0;
function fileRead () {
var me = this;
if (this.arrayIndex < this.arrayOfBlobs.length) {
var reader = new FileReader();
function bindedOnload(event) {
console.log("bindedOnload called");
console.log("reader results: ", event.target.result);
this.arrayIndex++; //Incrument the index
this.fileRead(); //Recursive call
}
//By Binding the onload event to the local scope we
//can have access to all local vars and functions
reader.onload = bindedOnload.bind(me);
reader.readAsText(this.arrayOfBlobs[arrayIndex]);
} else {
//This will executed when finishing reading all files
console.log("Finished");
}
}
//Call the fileRead for the first time
fileRead();