When implementing a custom uploadHandler, the PrimeNG File Upload Progress may not accurately reflect the upload progress

Question

When implementing a custom uploadHandler, the PrimeNG File Upload Progress may not accurately reflect the upload progress

Exploring the capabilities of the PrimeNG File Upload Component

I have customized the upload process to connect with an API using a special uploadHandler as shown below:

<p-fileUpload #fileUpload name="fileUpload" 
              (uploadHandler)="uploadHandler($event)" customUpload="true" fileLimit="5"
              multiple="multiple" accept="image/*" maxFileSize="1000000">
</p-fileUpload>

In my component.ts, I call upon the following functionality:

uploadedFiles: any[] = [];
@ViewChild('fileUpload') fileUpload: any;

constructor(private wpService: WordpressService, private cd: ChangeDetectorRef) {}

async uploadHandler(event) {
    console.log(this.fileUpload)
    this.fileUpload.disable = false;
    this.fileUpload.progress = 5;
    this.fileUpload.onProgress.emit({progress: this.fileUpload.progress});
    this.cd.detectChanges();
    this.uploadedFiles = [];

    const perFilePercent = 95 / event.files.length;
    this.fileUpload.disable = true;
    for (const f of event.files) {
        await this.wpService.uploadFile(f).then(response  => {
            const thisFile = f;
            thisFile.id = response.id;
            thisFile.url = response.source_url;
            this.fileUpload.progress += perFilePercent;
            this.fileUpload.onProgress.emit({progress: this.fileUpload.progress});
            this.cd.detectChanges();
            this.uploadedFiles.push(thisFile);
    });
    }

    this.fileUpload.files = [];
    this.cd.detectChanges();
}

Encountering an issue where manual updates to this.fileUpload.progress and

this.fileUpload.onProgress.emit({progress: this.fileUpload.progress});

are not reflected in the file upload component itself.

Interestingly, binding a progress bar to this.fileUpload.progress outside of the component works fine. For instance:

<p-progressBar [value]="fileUpload.progress" [showValue]="false"></p-progressBar>

Causes the expected behavior, while the progress bar within the actual file upload component remains static after the initial update.

A video demonstrating this behavior can be viewed at:

There seems to be an issue with updating the viewchild values or the event emitter, but the exact problem and solution remain elusive.

angular typescript primeng

Answer 1

Answer №1

Although this post is old, I recently encountered a similar task and wanted to share how I tackled it:

/*before constructor*/

totalPercent = 0;
percentDone: number;
@ViewChild('primeFileUpload') primeFileUpload: FileUpload;
private percentDonePerFile: number;

async fileUpload($event) {
    if ($event && $event.files) {
      this.totalPercent = $event.files.length * 100;
      this.percentDone = 0;
      console.log('uploading..');
      let sub;
      let i = 1;
      for (const file of $event.files) {
        const path = '/my/super/path';
        sub = this.docService.percentSub.subscribe(perc => {
          this.percentDonePerFile = perc;
          this.percentDone = (i - 1) * 100 + this.percentDonePerFile;
          console.log('emitting: ' + (this.percentDone / this.totalPercent * 100));
          this.primeFileUpload.onProgress.emit(this.round(this.percentDone / this.totalPercent * 100));
        });
        const dummyEvent = {srcElement: {files: [file]}};
        await this.docService.uploadFile(dummyEvent, path);
        this.percentDone = i * 100;
        this.primeFileUpload.onProgress.emit(this.round(this.percentDone / this.totalPercent * 100));
        console.log('emitting: ' + (this.percentDone / this.totalPercent * 100));
        sub.unsubscribe();
        i++;
      }
    }
  }

  progressReport($event: any) {
    this.primeFileUpload.progress = $event;
  }

My HTML code is simple:

      <p-fileUpload customUpload="true" #primeFileUpload
                multiple="true" (onProgress)="progressReport($event)"
                accept="image/*" maxFileSize="2000000" (uploadHandler)="fileUpload($event)"></p-fileUpload>

Hopefully this solution can be useful to someone! Have a wonderful day.

Answer 2

Although this post is old, I recently encountered a similar task and wanted to share how I tackled it:

/*before constructor*/

totalPercent = 0;
percentDone: number;
@ViewChild('primeFileUpload') primeFileUpload: FileUpload;
private percentDonePerFile: number;

async fileUpload($event) {
    if ($event && $event.files) {
      this.totalPercent = $event.files.length * 100;
      this.percentDone = 0;
      console.log('uploading..');
      let sub;
      let i = 1;
      for (const file of $event.files) {
        const path = '/my/super/path';
        sub = this.docService.percentSub.subscribe(perc => {
          this.percentDonePerFile = perc;
          this.percentDone = (i - 1) * 100 + this.percentDonePerFile;
          console.log('emitting: ' + (this.percentDone / this.totalPercent * 100));
          this.primeFileUpload.onProgress.emit(this.round(this.percentDone / this.totalPercent * 100));
        });
        const dummyEvent = {srcElement: {files: [file]}};
        await this.docService.uploadFile(dummyEvent, path);
        this.percentDone = i * 100;
        this.primeFileUpload.onProgress.emit(this.round(this.percentDone / this.totalPercent * 100));
        console.log('emitting: ' + (this.percentDone / this.totalPercent * 100));
        sub.unsubscribe();
        i++;
      }
    }
  }

  progressReport($event: any) {
    this.primeFileUpload.progress = $event;
  }

My HTML code is simple:

      <p-fileUpload customUpload="true" #primeFileUpload
                multiple="true" (onProgress)="progressReport($event)"
                accept="image/*" maxFileSize="2000000" (uploadHandler)="fileUpload($event)"></p-fileUpload>

Hopefully this solution can be useful to someone! Have a wonderful day.

Answer 3

Answer №2

This solution worked well for me, especially since the API has been updated.

HTML Code Snippet

<div class="card flex justify-content-center">
    <p-toast />
    <p-fileUpload #fileUploaderForm name="demo[]" [multiple]="false" customUpload="true"
        (uploadHandler)="handleFileUpload($event, fileUploaderForm)"
        (onProgress)="onProgress($event, fileUploaderForm)">
        <ng-template pTemplate="content">
            <ul *ngIf="uploadedFiles.length">
                <li *ngFor="let file of uploadedFiles">
                    {{ file.name }} - {{ file.size }} bytes
                </li>
            </ul>
        </ng-template>
    </p-fileUpload>
</div>

TypeScript/JavaScript Code Snippet

uploadedFiles: any[] = [];

  constructor(private messageService: MessageService) { }

  async handleFileUpload(event: FileUploadHandlerEvent, fileUploadForm: FileUpload) {
    console.log('Handling file upload', event, fileUploadForm);

    try {
      const result = await uploadData({
        path: `upload/${event.files[0].name}`,
        data: event.files[0],
        options: {

          onProgress: (progress) => {
            const progressPct = Math.round(progress.transferredBytes / progress.totalBytes! * 100)
            fileUploadForm.onProgress.emit({
              originalEvent: undefined!,
              progress: progressPct
            });
          }
        }
      }).result;
      this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File Uploaded', life: 3000 });
      fileUploadForm.clear();
      this.uploadedFiles.push(event.files[0]);

    } catch (error) {
      console.log('Error : ', error);
    }
  }
  onProgress(event: FileProgressEvent, fileUploadForm: FileUpload) {
    fileUploadForm.progress = event.progress;
  }

Answer 4

This solution worked well for me, especially since the API has been updated.

HTML Code Snippet

<div class="card flex justify-content-center">
    <p-toast />
    <p-fileUpload #fileUploaderForm name="demo[]" [multiple]="false" customUpload="true"
        (uploadHandler)="handleFileUpload($event, fileUploaderForm)"
        (onProgress)="onProgress($event, fileUploaderForm)">
        <ng-template pTemplate="content">
            <ul *ngIf="uploadedFiles.length">
                <li *ngFor="let file of uploadedFiles">
                    {{ file.name }} - {{ file.size }} bytes
                </li>
            </ul>
        </ng-template>
    </p-fileUpload>
</div>

TypeScript/JavaScript Code Snippet

uploadedFiles: any[] = [];

  constructor(private messageService: MessageService) { }

  async handleFileUpload(event: FileUploadHandlerEvent, fileUploadForm: FileUpload) {
    console.log('Handling file upload', event, fileUploadForm);

    try {
      const result = await uploadData({
        path: `upload/${event.files[0].name}`,
        data: event.files[0],
        options: {

          onProgress: (progress) => {
            const progressPct = Math.round(progress.transferredBytes / progress.totalBytes! * 100)
            fileUploadForm.onProgress.emit({
              originalEvent: undefined!,
              progress: progressPct
            });
          }
        }
      }).result;
      this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File Uploaded', life: 3000 });
      fileUploadForm.clear();
      this.uploadedFiles.push(event.files[0]);

    } catch (error) {
      console.log('Error : ', error);
    }
  }
  onProgress(event: FileProgressEvent, fileUploadForm: FileUpload) {
    fileUploadForm.progress = event.progress;
  }

When implementing a custom uploadHandler, the PrimeNG File Upload Progress may not accurately reflect the upload progress

Answer №1

Answer №2

Similar questions

What is the advantage of utilizing the "extends" keyword over directly stating the type?

Setting up an nginx configuration that seamlessly integrates an Angular 4 application and a WordPress blog within the same route

Using *ngIf to verify the presence of an attribute

I am seeking guidance for developing my own messaging platform, similar to Discord, using Typescript

The BehaviorSubject will consistently emit identical values to each subscription

I am curious about utilizing Primeng's MegaMenu component and how I can ensure that my nested menu options properly work with the "routerLink" functionality

Is it necessary for me to cancel subscriptions in my unit tests?

Steps to resolve the npm ERR! code ELIFECYCLE error when deploying to Heroku

Interacting between components using Angular 2 services

Creating an interface that extends the Map object in TypeScript to maintain the order of keys

Encountering an issue where attempting to access the `toUpperCase` property of undefined in an *ngFor loop leads to an error

Importing dynamically into Ionic 2 from locations other than the "node_modules" directory

Accessing JSON data stored locally and initializing it into a TypeScript variable within a React application

What could be the reason for Typescript attempting to interpret files in the `./build` directory as input files?

Click on the button to sort Angular data

What is the best way to incorporate Ekko Lightbox into an Angular 7 Project?

Tips for creating basic Jasmine and Karma tests for an Angular application to add an object to an array of objects

What is the process of invoking a service from a controller?

Remove the package from the @types folder within the node_modules directory

What is the best way to retrieve the most recent emitted value using a BehaviorSubject in a different component?