Angular - Async function does not resolve a rejected promise

Question

Angular - Async function does not resolve a rejected promise

Currently, my component utilizes an async method for handling file uploads. Here is an example:

//component
uploadPhotos = async (event: Event) => {
    const upload = await this.uploadService.uploadPhotos(event, this.files, this.urls);
}

The UploadService returns a promise containing the updated files and path files once the upload is completed. Everything works as intended when the promise successfully reaches resolve(). However, if reject() is triggered, the code continues execution until it encounters resolve() inside reader.onload().

// service
uploadPhotos(event: Event, oldFiles: File[], oldUrls: string[]): Promise<{files: File[], urls: string[]}> {
     return new Promise((resolve, reject) => {
          const files = (event.target as HTMLInputElement).files;

          if ((files.length + oldFiles.length) > 5) {
               this.alertService.error('Número máximo de fotos permitidos é 5.');
               reject();
          }
      
          for (let i = 0; i < files.length; i++) {
              const exists = oldFiles.findIndex(file => file.name === files[i].name);
              if (exists === -1) {
                   if (files[i].type === 'image/png' || files[i].type === 'image/jpeg') {
                      oldFiles.push(files[i]);

                      const reader = new FileReader();
                      reader.onerror = (error: any) => {
                          this.alertService.error(`Erro ao carregar a imagem: ${error}`);
                          reject();
                      };
                      reader.readAsDataURL(files[i]);
                      reader.onload = () => {
                          oldUrls.push(reader.result);
                          if (i === files.length - 1) { resolve({ files: oldFiles, urls: oldUrls }); }
                 };
            } else {
                this.alertService.error('Formato inválido. Somente imagens do formato Png, Jpeg e Jpg são permitidos.');
                reject();
            }
       }
  }
});
}

Is there a way to skip the reader.onload() block if reject() is called before resolve()?

javascript angular typescript asynchronous promise

Answer 1

Answer №1

Indeed, reject() and resolve() are simple (callback) function calls. They do not impact the control flow of your function. To control the flow, use return or if/else.

Additionally, within your new Promise, there is a loop. If an error occurs in one file reader, it will not affect the others. It is advised to handle promises on a more specific level. Here is a suggestion:

readFile(file: File): Promise<string> {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onerror = (error: any) => reject(error);
        reader.onload = () => resolve(reader.result);
        reader.readAsDataURL(file);
    });
}
// service
async uploadPhotos(event: Event, oldFiles: File[], oldUrls: string[]): Promise<{files: File[], urls: string[]}> {
    try {
        const files = (event.target as HTMLInputElement).files;
        if ((files.length + oldFiles.length) > 5) {
            throw new Error('Maximum number of allowed photos is 5.');
        }
        const newFiles = Array.from(files).filter(newFile =>
            !oldFiles.some(oldFile => oldFile.name === newFile.name)
        );
        if (!newFiles.every(file => file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg')) {
            throw new Error('Invalid format. Only Png, Jpeg, and Jpg image formats are allowed.');
        }
        const newUrls = await Promise.all(newFiles.map(file =>
            this.readFile(file).catch(error => {
                throw new Error(`Error loading image: ${error}`);
            })
        ));
        return {
            files: oldFiles.concat(newFiles),
            urls: oldUrls.concat(newUrls)
        };
    } catch(err) {
        this.alertService.error(err.message);
        throw new Error("Something went wrong during file upload");
    }
}

Answer 2

Indeed, reject() and resolve() are simple (callback) function calls. They do not impact the control flow of your function. To control the flow, use return or if/else.

Additionally, within your new Promise, there is a loop. If an error occurs in one file reader, it will not affect the others. It is advised to handle promises on a more specific level. Here is a suggestion:

readFile(file: File): Promise<string> {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onerror = (error: any) => reject(error);
        reader.onload = () => resolve(reader.result);
        reader.readAsDataURL(file);
    });
}
// service
async uploadPhotos(event: Event, oldFiles: File[], oldUrls: string[]): Promise<{files: File[], urls: string[]}> {
    try {
        const files = (event.target as HTMLInputElement).files;
        if ((files.length + oldFiles.length) > 5) {
            throw new Error('Maximum number of allowed photos is 5.');
        }
        const newFiles = Array.from(files).filter(newFile =>
            !oldFiles.some(oldFile => oldFile.name === newFile.name)
        );
        if (!newFiles.every(file => file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg')) {
            throw new Error('Invalid format. Only Png, Jpeg, and Jpg image formats are allowed.');
        }
        const newUrls = await Promise.all(newFiles.map(file =>
            this.readFile(file).catch(error => {
                throw new Error(`Error loading image: ${error}`);
            })
        ));
        return {
            files: oldFiles.concat(newFiles),
            urls: oldUrls.concat(newUrls)
        };
    } catch(err) {
        this.alertService.error(err.message);
        throw new Error("Something went wrong during file upload");
    }
}

Answer 3

Answer №2

To ensure that the load listener does not trigger, you can include the load listener and then remove it in the error handler:

reader.onerror = (error: any) => {
  this.alertService.error(`An error occurred while loading the image: ${error}`);
  reader.removeEventListener('load', loadHandler);
  reject();
};
reader.readAsDataURL(files[i]);

const loadHandler = () => {
  oldUrls.push(reader.result);
  if (i === files.length - 1) {
    resolve({ files: oldFiles, urls: oldUrls });
  }
};
reader.addEventListener('load', loadHandler);

Answer 4

To ensure that the load listener does not trigger, you can include the load listener and then remove it in the error handler:

reader.onerror = (error: any) => {
  this.alertService.error(`An error occurred while loading the image: ${error}`);
  reader.removeEventListener('load', loadHandler);
  reject();
};
reader.readAsDataURL(files[i]);

const loadHandler = () => {
  oldUrls.push(reader.result);
  if (i === files.length - 1) {
    resolve({ files: oldFiles, urls: oldUrls });
  }
};
reader.addEventListener('load', loadHandler);

Angular - Async function does not resolve a rejected promise

Answer №1

Answer №2

Similar questions

The file size exceeds the server's upload limit, despite making changes to the php.ini file

Having difficulties creating a new instance of a class

angular form validation methods

How to retrieve an element by its class using JavaScript and Jquery while implementing a

What is the best way to store the dom in cache to ensure that the page remains unchanged when navigating back using the back button?

NPM is complaining about the absence of a start script

The chosen selection automatically deactivates the checkbox with a matching value

Issues with Angular 6 HTTPInterceptor interface in production environments

Guide to implementing dynamic custom validations in Angular 2 using ReactiveForms

Step-by-step guide on importing CSS into TypeScript

Tips for assigning unique non-changing keys to siblings in React components

Utilizing index signatures in TypeScript mapped types

After 15 minutes of inactivity in the Angular project, the JWT (Json Web Token) token expires leading to the need for renewal or refresh

Struggling to make the upvoting feature function properly in the Thinkster MEAN Stack Tutorial

Transmit the standard information via an AJAX POST inquiry

Limiting the length of parameters in an Angular directive

Bypass VueJs Typescript errors within the template section with Typescript

Ionic 2's Navigation Feature Failing to Function

Surprising literal found at the second position

Safari is causing issues with HTML5 Video playback