Multiple file upload `reader.onloadend` is not firing

262 Views Asked by At

I'm using p-fileUpload in Angular 6.0.0 app, for uploading the image files (In this case multiple images files). It has an event handler (uploadHandler) for the uploaded files.

<p-fileUpload multiple="true" name="myfile[]" accept="image/*" [auto]="true" 
      customUpload="true" chooseLabel="Select" (uploadHandler)="uploadImage($event)">
 </p-fileUpload>

The files are getting uploaded correctly, but I'm not able to generate the base64 code when looping over the e.files array, because reader.onloadend is not firing. I've searched this firing issue and found some related questions but the solution of them is not solving my problem. Below is the code I've written for multiple image file upload -

uploadImage(e: any) {
if (e && e.files.length) {
  const reader: FileReader = new FileReader();
  e.files.forEach((i: File, j: any) => {
    reader.onloadend = (ev: any) => {
      console.log('inside??');
      // Console is not triggered
    };
    // reader.readAsDataURL(...);
    this.cdr.markForCheck(); // For outside zone detection
  });
}

}

Please help me with this problem. I'm using this same code for single image upload (so I don't need forEach loop there) inside the same app and it is working in all other places unlike in this case.

0

There are 0 best solutions below