FileUpload is an advanced uploader with drag and drop support, multi file uploads, auto uploading, progress tracking and validations.
import { FileUploadModule } from 'primeng/fileupload';
FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.
<p-fileupload
#fu
mode="basic"
chooseLabel="Choose"
chooseIcon="pi pi-upload"
name="demo[]"
url="https://www.primefaces.org/cdn/api/upload.php"
accept="image/*"
maxFileSize="1000000"
(onUpload)="onUpload($event)"
/>
<p-button label="Upload" (onClick)="fu.upload()" severity="secondary" />
When auto property is enabled, a file gets uploaded instantly after selection.
<p-fileupload
mode="basic"
name="demo[]"
chooseIcon="pi pi-upload"
url="https://www.primefaces.org/cdn/api/upload.php"
accept="image/*" maxFileSize="1000000"
(onUpload)="onBasicUploadAuto($event)"
[auto]="true"
chooseLabel="Browse" />
Uploader UI is customizable using a ng-template called file that gets the File instance as the implicit variable. Second ng-template named content can be used to place custom content inside the content section which would be useful to implement a user interface to manage the uploaded files such as removing them. This template gets the selected files as the implicit variable. Third and final ng-template option is toolbar to display custom content at toolbar.
Drag and drop files to here to upload.
<p-toast />
<p-fileupload
name="myfile[]"
url="https://www.primefaces.org/cdn/api/upload.php"
[multiple]="true"
accept="image/*"
maxFileSize="1000000"
(onUpload)="onTemplatedUpload()"
(onSelect)="onSelectedFiles($event)"
>
<ng-template
pTemplate="header"
let-files
let-chooseCallback="chooseCallback"
let-clearCallback="clearCallback"
let-uploadCallback="uploadCallback"
>
<div class="flex flex-wrap justify-between items-center flex-1 gap-4">
<div class="flex gap-2">
<p-button
(onClick)="choose($event, chooseCallback)"
icon="pi pi-images"
[rounded]="true"
[outlined]="true"
/>
<p-button
(onClick)="uploadEvent(uploadCallback)"
icon="pi pi-cloud-upload"
[rounded]="true"
[outlined]="true"
severity="success"
[disabled]="!files || files.length === 0"
/>
<p-button
(onClick)="clearCallback()"
icon="pi pi-times"
[rounded]="true"
[outlined]="true"
severity="danger"
[disabled]="!files || files.length === 0"
/>
</div>
<p-progressbar
[value]="totalSizePercent"
[showValue]="false"
class="w-full"
styleClass="md:w-20rem h-1 w-full md:ml-auto"
>
<span class="whitespace-nowrap">{{ totalSize }}B / 1Mb</span>
</p-progressbar>
</div>
</ng-template>
<ng-template
pTemplate="content"
let-files
let-uploadedFiles="uploadedFiles"
let-removeFileCallback="removeFileCallback"
let-removeUploadedFileCallback="removeUploadedFileCallback"
>
<div class="flex flex-col gap-8 pt-4">
<div *ngIf="files?.length > 0">
<h5>Pending</h5>
<div class="flex flex-wrap gap-4">
<div
*ngFor="let file of files; let i = index"
class="p-8 rounded-border flex flex-col border border-surface items-center gap-4"
>
<div>
<img
role="presentation"
[alt]="file.name"
[src]="file.objectURL"
width="100"
height="50"
/>
</div>
<span
class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden"
>{{ file.name }}</span
>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Pending" severity="warning" />
<p-button
icon="pi pi-times"
(click)="onRemoveTemplatingFile($event, file, removeFileCallback, index)"
[outlined]="true"
[rounded]="true"
severity="danger"
/>
</div>
</div>
</div>
<div *ngIf="uploadedFiles?.length > 0">
<h5>Completed</h5>
<div class="flex flex-wrap gap-4">
<div
*ngFor="let file of uploadedFiles; let i = index"
class="card m-0 px-12 flex flex-col border border-surface items-center gap-4"
>
<div>
<img
role="presentation"
[alt]="file.name"
[src]="file.objectURL"
width="100"
height="50"
/>
</div>
<span
class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden"
>{{ file.name }}</span
>
<div>{{ formatSize(file.size) }}</div>
<p-badge value="Completed" class="mt-4" severity="success" />
<p-button
icon="pi pi-times"
(onClick)="removeUploadedFileCallback(index)"
[outlined]="true"
[rounded]="true"
severity="danger"
/>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template pTemplate="file"> </ng-template>
<ng-template pTemplate="empty">
<div class="flex items-center justify-center flex-col">
<i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color"></i>
<p class="mt-6 mb-0">Drag and drop files to here to upload.</p>
</div>
</ng-template>
</p-fileupload>
FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
<p-fileupload
name="demo[]"
url="https://www.primefaces.org/cdn/api/upload.php"
(onUpload)="onUpload($event)"
[multiple]="true"
accept="image/*"
maxFileSize="1000000"
mode="advanced"
>
<ng-template pTemplate="empty">
<div>Drag and drop files to here to upload.</div>
</ng-template>
<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>
FileUpload uses a hidden native input element with type="file" for screen readers.
Interactive elements of the uploader are buttons, visit the Button accessibility section for more information.