Загрузка файлов

import { FileUploadModule } from 'primeng-lts/fileupload';
import { HttpClientModule } from '@angular/common/http';

import { Component, OnInit } from '@angular/core';
import { MessageService } from 'primeng/api';
 
@Component({
  selector: 'app-prime-fileupload',
  templateUrl: './prime-fileupload.component.html',
  styleUrls: ['./prime-fileupload.component.scss'],
  providers: [MessageService],
})
export class PrimeFileuploadComponent implements OnInit {
  constructor(private messageService: MessageService) {}
 
  uploadedFiles: any[] = [];
 
  ngOnInit(): void {}
 
  onUpload(event) {
    for (let file of event.files) {
      this.uploadedFiles.push(file);
    }
 
    this.messageService.add({ severity: 'info', summary: 'File Uploaded', detail: '' });
  }
 
  onBasicUpload(event) {
    for (let file of event.files) {
      this.uploadedFiles.push(file);
    }
 
    this.messageService.add({ severity: 'info', summary: 'File Uploaded', detail: '' });
  }
 
  onBasicUploadAuto(event) {
    for (let file of event.files) {
      this.uploadedFiles.push(file);
    }
 
    this.messageService.add({ severity: 'info', summary: 'File Uploaded', detail: '' });
  }
 
  uploadHandlerCstm(event) {
    console.log('custom');
  }
}

<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>

<p-fileUpload
mode="basic"
name="demo[]"
url="./upload.php"
accept="image/*"
maxFileSize="1000000"
(onUpload)="onBasicUpload($event)"
></p-fileUpload>

<p-fileUpload
#fubauto
mode="basic"
name="demo[]"
url="./upload.php"
accept="image/*"
maxFileSize="1000000"
(onUpload)="onBasicUploadAuto($event)"
[auto]="true"
chooseLabel="Browse"
></p-fileUpload>

<p-fileUpload
name="demo[]"
url="./upload.php"
(onUpload)="onUpload($event)"
multiple="multiple"
accept="image/*"
maxFileSize="1000000"
>
<ng-template pTemplate="content">
  <span>Drag you files here</span>
  <ul *ngIf="uploadedFiles.length">
    <li *ngFor="let file of uploadedFiles">{ { file.name } } - { { file.size } } bytes</li>
  </ul>
</ng-template>
</p-fileUpload>

<p-fileUpload
name="demo[]"
customUpload="true"
(uploadHandler)="uploadHandlerCstm($event)"
multiple="multiple"
accept="image/*"
maxFileSize="1000000"
chooseIcon="pi pi-cloud-upload"
chooseLabel="Добавить файл"
uploadLabel="Загрузить"
cancelLabel="Отмена"
styleClass="qpalette-file-uploader"
>
<ng-template pTemplate="toolbar">
  <header class="fileupload-header">
    <p style="margin-top: 8px"><b>Загрузить</b></p>
    <p class="text-small text-color-label">
      Загружайте файлы с помощью кнопкок ниже. Форматы: jpg, png, pdf, doc, docx. Максимум 1mb.
    </p>
  </header>
</ng-template>
 
<ng-template let-file pTemplate="file">
  <div class="fileupload-item">
    <i class="pi pi-file fileupload-file-icon"></i>
    <span class="fileupload-item-filename">{ { file.name } }</span>
    <i class="pi pi-trash fileupload-thrash-icon"></i>
  </div>
</ng-template>
</p-fileUpload>

<p-fileUpload
  name="image[]"
  (uploadHandler)="uploadHandlerCstm($event)"
  accept="image/*"
  maxFileSize="1000000"
  [chooseIcon]="'pi pi-camera'"
  [chooseLabel]="' '"
  [showUploadButton]="false"
  [showCancelButton]="false"
  styleClass="image-uploader"
>
  <ng-template let-file pTemplate="file">
    <img [src]="file.objectURL" />
  </ng-template>
</p-fileUpload>
 
<p-fileUpload
  name="image[]"
  (uploadHandler)="uploadHandlerCstm($event)"
  accept="image/*"
  maxFileSize="1000000"
  [chooseIcon]="'pi pi-camera'"
  [chooseLabel]="' '"
  [showUploadButton]="false"
  [showCancelButton]="false"
  styleClass="image-uploader image-uploader--bg"
>
  <ng-template let-file pTemplate="file">
    <img [src]="file.objectURL" />
  </ng-template>
</p-fileUpload>
 
<p-fileUpload
  name="image[]"
  (uploadHandler)="uploadHandlerCstm($event)"
  accept="image/*"
  maxFileSize="1000000"
  [chooseIcon]="'pi pi-camera'"
  [chooseLabel]="' '"
  [showUploadButton]="false"
  [showCancelButton]="false"
  styleClass="image-uploader image-uploader--lg"
>
  <ng-template let-file pTemplate="file">
    <img [src]="file.objectURL" />
  </ng-template>
</p-fileUpload>
 
<p-fileUpload
  name="image[]"
  (uploadHandler)="uploadHandlerCstm($event)"
  accept="image/*"
  maxFileSize="1000000"
  [chooseIcon]="'pi pi-camera'"
  [chooseLabel]="' '"
  [showUploadButton]="false"
  [showCancelButton]="false"
  styleClass="image-uploader image-uploader--lg image-uploader--bg"
>
  <ng-template let-file pTemplate="file">
    <img [src]="file.objectURL" />
  </ng-template>
</p-fileUpload>

<p-fileUpload
name="image[]"
(uploadHandler)="uploadHandlerCstm($event)"
accept="image/*"
maxFileSize="1000000"
[chooseIcon]="'pi pi-camera'"
[chooseLabel]="' '"
[showUploadButton]="false"
[showCancelButton]="false"
styleClass="image-uploader image-uploader--lg image-uploader--bg"
>
<ng-template let-file pTemplate="file">
  <img [src]="file.objectURL" />
</ng-template>
</p-fileUpload>