Submit the request when the fileReader's onload event is triggered

Question

Submit the request when the fileReader's onload event is triggered

Do you have any suggestions on how to improve my fileReader for uploading images? I am currently facing an issue where multiple requests are being sent to the server when there are more than 1 image due to a for loop. How can I modify my code to address this issue?


        for (let file of selectedFiles) {
            const fileName = file.name;
            const reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = () => {
                const image = reader.result as any;
                var base64 = btoa(
                    new Uint8Array(image)
                        .reduce((data, byte) => data + String.fromCharCode(byte), '')
                );
                imageArray.push({ fileName: fileName, content: base64 });
                console.log(imageArray);
                this.service.create(this.finalData).subscribe({
                    next: data => {
                    console.log(data);
                    this.openSnackBar("Success", 'x');
                },
                error: error => {
                    console.error('There was an error!', error);
                }
            })
        }
    }

javascript angular typescript

Answer 1

Answer №1

If you have a lot of asynchronous tasks to handle simultaneously, utilizing promises can save you a significant amount of time and effort.

To start, create a function that takes a file and returns a promise that resolves to the desired data.

Let's define FileData here for clarity on how things will unfold.

type FileData = {
    fileName: string;
    content: string; // base64 encoded
};

const getFileData = (file) => {
    const fileName = file.name;
    
    const promise = new Promise(
        (res, rej) => {
            const reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = () => {
                const image = reader.result as any;
                var base64 = btoa(
                    new Uint8Array(image)
                      .reduce((data, byte) => data + String.fromCharCode(byte), '')
                  );
                const data: FileData = { fileName: fileName, content: base64 };
                res(data)
            };
    });

    return promise;
};

Next, execute your loop but utilize the function to retrieve your data and consolidate the results into an array.

const promises = [];
for (let file of selectedFiles) {
    promises.push(getFileData(promises));
};

Then utilize Promise.all to execute another function once all promises are fulfilled and data is available.

Promise.all(promises).then((dataArray: FileData[]) => {

    // Proceed to work with dataArray and upload all the data in the array at once

});

With that being said, consider modifying the server to support a standard multipart MIME formatted request and use FormData for uploading the data instead of manually converting everything to base64.

const data = new FormData(document.getElementById('myForm');
const responsePromise = fetch('/url', { method: "POST", body: data });

… this approach requires less effort than the previous method! It achieves the same outcome, just in a different format.

Answer 2

If you have a lot of asynchronous tasks to handle simultaneously, utilizing promises can save you a significant amount of time and effort.

To start, create a function that takes a file and returns a promise that resolves to the desired data.

Let's define FileData here for clarity on how things will unfold.

type FileData = {
    fileName: string;
    content: string; // base64 encoded
};

const getFileData = (file) => {
    const fileName = file.name;
    
    const promise = new Promise(
        (res, rej) => {
            const reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = () => {
                const image = reader.result as any;
                var base64 = btoa(
                    new Uint8Array(image)
                      .reduce((data, byte) => data + String.fromCharCode(byte), '')
                  );
                const data: FileData = { fileName: fileName, content: base64 };
                res(data)
            };
    });

    return promise;
};

Next, execute your loop but utilize the function to retrieve your data and consolidate the results into an array.

const promises = [];
for (let file of selectedFiles) {
    promises.push(getFileData(promises));
};

Then utilize Promise.all to execute another function once all promises are fulfilled and data is available.

Promise.all(promises).then((dataArray: FileData[]) => {

    // Proceed to work with dataArray and upload all the data in the array at once

});

With that being said, consider modifying the server to support a standard multipart MIME formatted request and use FormData for uploading the data instead of manually converting everything to base64.

const data = new FormData(document.getElementById('myForm');
const responsePromise = fetch('/url', { method: "POST", body: data });

… this approach requires less effort than the previous method! It achieves the same outcome, just in a different format.

Submit the request when the fileReader's onload event is triggered

Answer №1

Similar questions

Angular 2: Implementing service functions on button click using the (click) event

Choosing the open status of an HTML list

Changing the value of a textarea in Angular forms using JavaScript

const error = new TypeError(`${calculateRelativePath(cwd, fileName)}: Skipping emission of file`);

Created a notification for when the user clicks the back button, but now looking to remove it upon form submission

Dynamic <figcaption> that adjusts to different screen sizes with smooth animations

How to retrieve data from a nested object in Angular templates

I require the JSON data to be displayed in an array format

Implementing a filter on retrieved data from an API in a React application

The benefits of a modular design in a React and TypeScript library

Error in jQuery: Null property causing TypeError when reading 'text'

Convert Angular 2 Observable to a regular value

Vue-Select Runs into Issue Generating Choices from an Array

I am looking to modify the background color of characters in a text box once the characters in a textarea exceed 150 characters

I'm having trouble saving the session, what could be the issue?

Angular 2 isn't triggering the custom validator for every keypress

Issue: npm encountered an error due to writing after reaching the end

Can you explain the functionality of express-async-handler?

Tips for resolving errors in Angular controls

Display PickerIOS when a button is clicked in a React Native application