As I work on developing a filedrop platform, I encountered an issue related to reading Blob files from the FileReader API. The code flow involves obtaining files from the user through the upload service as an observable array and converting them into base64 strings for display in the browser.
Code Snippet:
async getFileList(files: File[]) {
let src!: IStoryFile[];
for (const f of files) {
const blob = await this.readFileBlob(f)
src = [{ file: f, src: blob }]
}
this.uploadSrv.setFilesUpload(src);
}
readFileBlob(file: File): Promise<any> {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = (e) => {
resolve(reader.result)
}
reader.readAsDataURL(file)
})
}
Once each file has been handled in the foreach loop, a next action is taken to pass the final array to the service, which then provides the data for the *ngFor | async loop in the DOM:
protected files$!: Observable<IStoryFile[]>;
...
this.files$ = this.uploadSrv.getFilesUpload$()
.pipe(
tap(val => console.log(val)),
)
Current Results: The function outputs the length of the array containing Observable values.
Expected Results: The function should output a single array of objects adhering to the specified interface:
export interface IStoryFile {
file: File;
src?: string | ArrayBuffer | null;
}