Angular FileUpload is an advanced uploader with drag and drop support, multi file uploads, auto uploading, progress tracking and validations.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {FileUploadModule} from 'primeng/fileupload';
import {HttpClientModule} from '@angular/common/http';
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 files 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]="true"></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
Maximum 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. This template gets the selected files as the implicit variable. 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" let-files>
<div>Additional content.</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 overridden by enabling customUpload 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
}
Theming
FileUpload supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG FileUpload showcase for demos and documentation.