FileUploadFileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.

Documentation

Import

import {FileUploadModule} from 'primeng/fileupload';
 

Getting Started

FileUpload requires a url property as the upload target and a name to identify the files at backend.

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

Multiple Uploads

Only one file can be selected at a time, to allow selecting multiples enable multiple option.

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

DragDrop

File selection can also be done by dragging and dropping one or more to the content section of the component.

Auto Uploads

When auto property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.

<p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" auto="auto"></p-fileUpload>
 

File Types

Selectable file types can be restricted with accept property, example below only allows images to be uploaded. Read more about other possible values here.

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

File Size

Maximium file size can be restricted using maxFileSize property defined in bytes.

<p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" maxFileSize="1000000"></p-fileUpload>
 

In order to customize the default messages use invalidFileSizeMessageSummary and invalidFileSizeMessageDetail options. In summary {0} placeholder refers to the filename and in detail, file size.

• invalidFileSizeMessageSummary: '{0}: Invalid file size, '
• invalidFileSizeMessageDetail: string = 'maximum upload size is {0}.'

Templating

File list 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. Third and final ng-template option is "toolbar" to display custom content at toolbar.

<p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" maxFileSize="1000000">
        <ng-template pTemplate="toolbar">
            <div>Upload 3 Files</div>
        </ng-template>
        <ng-template let-file pTemplate="file">
            <div>Custom UI to display a file</div>
        </ng-template>
        <ng-template pTemplate="content">
            <div>Custom UI to manage uploaded files</div>
        </ng-template>
</p-fileUpload>
 

Request Customization

Internally, FileUpload uses Angular's HttpClient module so you may take advantage of the built-in features such interceptors and header customization.

Basic UI

FileUpload basic mode provides a simpler UI as an alternative to advanced mode.

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

Custom Upload

Uploading implementation can be overriden by enabling customMode property and defining a custom upload handler event.

<p-fileUpload name="myfile[]" customUpload="true" (uploadHandler)="myUploader($event)"></p-fileUpload>
 

myUploader(event) {
    //event.files == files to upload
}
 

Properties

Events

Methods

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

Source

View on GitHub

<p-toast [style]="{marginTop: '80px'}"></p-toast>
<h3 class="first">Advanced</h3>
<p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
        multiple="multiple" accept="image/*" maxFileSize="1000000">
    <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>
<h3>Basic</h3>
<p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)"></p-fileUpload>
<h3>Basic with Auto</h3>
<p-fileUpload #fubauto mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" auto="true" chooseLabel="Browse"></p-fileUpload>
 

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: ''});
    }
}