I am currently working with Angular and attempting to upload a file to be stored in the database, and then download the file. I am utilizing base64 encoding/decoding for this process. It appears to be functioning correctly, however, when I try to open the downloaded file using Windows' default image viewer, an error message pops up stating "It looks like we don't support this format." Despite this message, the file isn't empty as its size is greater than zero. I suspect that my variable 'decode' showing up as type [object ArrayBuffer] in the debugger rather than a string might be the issue.
//The code used to read the file (for example: a jpeg file):
let fileReader = new FileReader();
// Callback function for when the filereader's onload event fires (readAsBinaryString() below)
fileReader.onload = async (e) => {
// Base64 encode the file contents
let encoded = btoa(fileReader.result as string);
// Pass the encoded file content, type, and name to the API
//Store the file (i.e. encoded) in the database
// Note: I compared this value to the value retrieved from the database below and they match
}
// Now read the file contents. This is an asynchronous operation and the onload callback will be triggered upon completion
fileReader.readAsBinaryString(documentName);
//Retrieve it let documentName = 'test.jpg'; let encodedDocument = xxx; //the encoded string obtained from the database, matching what was saved previously let documentFormat = 'image/jpeg'; let decoded = atob(encodedDocument);
//Download it
const blob = new Blob([decoded], { type: documentFormat });
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = documentName;
a.click();
window.URL.revokeObjectURL(url);
a.remove();