Upload file with Primeng upload component
24,932
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
Author by
infodev
Updated on December 20, 2020Comments
-
infodev over 3 years
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
-
infodev over 5 yearscan you add please HTML ?
-
Aw3same over 5 yearsYes, I added it
-
infodev over 5 yearsI have tried your exemple, when I console.log formData after append line, I get empty content. What Am I supposted to have ?
-
Aw3same over 5 yearsWhat do you receive if you log the input parameter in the post method? I update my POST code to the current version I'm using. I log the form and it's empty, but my file travels to bbdd fine
-
infodev over 5 yearsI have used
formData.get("keyvalue")
to getformData
content. -
Oleg Imanilov over 4 yearsYou asking question in "Answer". It is better to ask as a "Question" - so ppl can answer on it.
-
Ali Eshghi almost 3 yearssorry
postFile(this.uplo)
get only one parameter while in your service it needs 3 parameters, I want to know how its work? -
Ali Eshghi almost 3 yearsand dear @Aw3same what is in
FileUploadModel
? alsouplo: File
-
Aw3same almost 3 yearsI have this
export class FileUploadModel { data: File; type: string; }