Parsing files in Javascript with the FileReader Web API
The following Javascript code is in relation to one of my recent videos which provides an overview on how to process file uploads with the FileReader Web API – you can watch the video posted in the sidebar.
I have broken down the code into two steps with an explanation as seen below.
Step 1.
This is a method that I’m calling within my “main” JS file. The processFiles method is actually stored in a module which is being imported into the main JS file. Since the processFiles method is an async method i can use callback handlers (then, catch and finally) to process the data, error handling and completion status.
Utils.processFiles(filesArray)
.then(data => {
if (data.length > 0) {
//Process file data here
}
})
.catch(error => {
console.log(error);
})
.finally(() => {
console.log("-- File Processing Completed --");
}
);
Step 2.
The following are two methods i created in my JS module which are being used to parse the file data. The first function, processFiles, is an async function and works in tandem with the parseFiles method which parses the file data and returns a promise back to the async function.
export const processFiles = async function(files) {
try {
if (files.length > 0) {
const fileContent = await parseFiles(files);
return fileContent;
} else {
throw new Error(`Files array is empty.`);
}
} catch (error) {
console.error("Error:", error.message);
}
};
export const parseFiles = function(files) {
return new Promise((resolve, reject) => {
if (files.length > 0) {
let fileReaders = []; //Store each file reader
let totalFileReaders = 0; //Keep track of each file reader object
let processedFiles = []; //Processed data that needs to be returned
let parsingError = "";
//Parse through the files array
for (let i = 0; i < files.length; i++) {
const contentType = files[i].type;
const reader = new FileReader();
reader.readAsBinaryString(files[i]);
//Keep track of each file reader created
fileReaders.push(reader);
totalFileReaders++;
//Get the file information
reader.onload = function(e) {
const contents = e.target.result;
const base64String = window.btoa(contents);
const fileData = "data:" + contentType + ";base64," + base64String;
const fileName = files[i].name;
processedFiles.push([fileName, fileData]);
};
reader.onerror = function(e) {
parsingError = e.target.error;
};
}
if (parsingError == "") {
if (fileReaders.length > 0) {
for (let i = 0; i < fileReaders.length; i++) {
fileReaders[i].onloadend = function(e) {
totalFileReaders--;
if (totalFileReaders == 0) {
resolve(processedFiles);
}
};
}
} else {
reject(new Error(`No file readers detected.`));
}
} else {
reject(new Error(`File parsing error: ${parsingError}`));
}
} else {
reject(new Error("No file data found."));
}
});
};
And that’s pretty much all there is to it. If you need a deeper understanding of the code please reference the video located in the sidebar.
If you have any questions or require help with your web project feel free to get in touch with me at leo@digitalodyssey.ca
Cheers.
5 