Question

84

Upload file with Primeng upload component

rated 0 times [ 90] [ 6] / answers: 1 / hits: 30478 / 6 Years ago, wed, september 12, 2018, 12:00:00

I would upload the file in Angular using upload component

Here's my HTML:

<p-fileUpload mode=basic name=demo[] customUpload=true accept=image/* maxFileSize=1000000  (uploadHandler)=upload($event)></p-fileUpload>

in my ts I print param value

upload(event) {

  console.log(event)

}

I get only metadata and not blob content

{files:[{objectURL:{changingThisBreaksApplicationSecurity:blob:https://prime-ng-file-uploading.stackblitz.io/d429e761-c391-45fa-8628-39b603e25225}}]}

I would also get file content to send via API to the server

Here's a stackblitz demo

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ariel

Add To Favorites

Follow

Total Points: 523

Total Questions: 111

Total Answers: 100

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

answered 6 Years ago janettejordynm · Accepted Answer

In the official documentation you have an example:

export class FileUploadDemo {

  uploadedFiles: any[] = [];

  constructor(private messageService: MessageService) {}

  onUpload(event) {

    for (let file of event.files) {

      this.uploadedFiles.push(file);

    }

    this.messageService.add({

      severity: 'info',

      summary: 'File Uploaded',

      detail: ''

    });

  }

}

When I used primeNG, I did it like this (for uploading only 1 file) :

HTML

 <p-fileUpload name=myfile[] customUpload=true multiple=multiple (uploadHandler)=onUpload($event) accept=application/pdf></p-fileUpload>

component.ts

export class AlteracionFormComponent {

  uplo: File;

  constructor(private fileService: FileUploadClientService) {}

  onUpload(event) {

    for (let file of event.files) {

      this.uplo = file;

    }

    this.uploadFileToActivity();

  }

  uploadFileToActivity() {

    this.fileService.postFile(this.uplo).subscribe(data => {

      alert('Success');

    }, error => {

      console.log(error);

    });

  }

}

And my service (in Angular)

service.ts

  postFile(id_alteracion: string, filesToUpload: FileUploadModel[], catalogacion: any): Observable<any> {

    let url = urlAPIAlteraciones + '/';

    url += id_alteracion + '/documentos';



    const formData: FormData = new FormData();



    formData.append('json', JSON.stringify(catalogacion));



    for (let file of filesToUpload) {

      formData.append('documento', file.data, file.data.name);

    }



    console.log(formData);



    let headers = new HttpHeaders();



    return this._http.post(url, formData, { headers: headers });

  }

Hope that helps