HTML code to upload the the file using prime ng file upload. Once uploaded, provided with document type drop down and a description.
<form [formGroup] = "uploadForm">
<p-fileUpload #fileInput name="demo[]" customUpload="true" (onSelect)="onUpload($event)" multiple="multiple" accept="image/*,.csv,.xml,.doc,.docx,.pdf"
maxFileSize="1000000">
<ng-template pTemplate="content">
<ul *ngIf="uploadedFiles">
<li *ngFor="let file of attachments"> -
<input type="text" [(ngModel)]="file.file" value="" class="form-control form-control-sm">
<ng-select [items]="documentTypes"
[virtualScroll]="true" [(ngModel)]="file.test" placeholder="Select" bindLabel="descriptionEn"
bindValue="id">
<ng-template ng-option-tmp let-item="item" let-index="index">
</ng-template>
</ng-select>
<input type="text" [(ngModel)]="file.test2" class="form-control form-control-sm">
</li>
</ul>
</ng-template>
</p-fileUpload>
<button class="btn btn-sm btn-primary" (click)="saveAttachment()" translate>button.save</button>
</form>
each time a file is selected ill push that to attachments array, but in case multiple file is selected, then this will fail.
onUpload(event) {
const file = event.files;
this.attachments.unshift(event.files);
}
On upload, I'm not using the prime ng default upload button , instead using a common save. On click had to send file, type, description this array to server.
saveAttachment(){
console.log("file :"+JSON.stringify(this.attachments))
}
here this.attachments attachment doesn't have the file value.
preffered to use reactive form way, here instead of ngModel.
from Customize prime ng file multiple file upload to add form controls along with each uploaded file
No comments:
Post a Comment