import {FileUploadModule} from 'primeng/primeng';
FileUpload requires a url property as the upload target and a name to identify the files at backend.
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload"></p-fileUpload>
Only one file can be selected at a time, to allow selecting multiples enable multiple option.
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"></p-fileUpload>
File selection can also be done by dragging and dropping one or more to the content section of the component.
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="http://localhost:3000/upload" multiple="multiple"
accept="image/*" auto="auto"></p-fileUpload>
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="http://localhost:3000/upload" multiple="multiple"
accept="image/*"></p-fileUpload>
Maximium file size can be restricted using maxFileSize property defined in bytes.
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" 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.
File list UI is customizable using a template called "file" and another template named "content" can be used to place custom content inside the content section as well which would be useful to implement a user interface to manage the uploaded files such as removing them. The file template gets the File instance a the implicit variable.
<p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
accept="image/*" maxFileSize="1000000">
<template let-file pTemplate type="file">
<div>Custom UI to display a file</div>
</template>
<template pTemplate type="content">
<div>Custom UI to manage uploaded files</div>
</template>
</p-fileUpload>
XHR request to upload the files can be customized using the onBeforeUpload callback that passes the xhr instance and FormData object as event parameters.
Name | Type | Default | Description |
---|---|---|---|
name | string | null | Name of the request parameter to identify the files at backend. |
url | string | null | Remote url to upload the files. |
multiple | boolean | false | Used to select multiple files at once from file dialog. |
accept | string | false | Pattern to restrict the allowed file types such as "image/*". |
disabled | boolean | false | Disables the upload functionality. |
maxFileSize | number | null | Maximum file size allowed in bytes. |
invalidFileSizeMessageSummary | string | "{0}: Invalid file size, " | Summary message of the invalid fize size. |
invalidFileSizeMessageDetail | string | "maximum upload size is {0}." | Detail message of the invalid fize size. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
previewWidth | number | 50 | Width of the image thumbnail in pixels. |
Name | Parameters | Description |
---|---|---|
onBeforeUpload | event.xhr: XmlHttpRequest instance. event.formData: FormData object. |
Callback to invoke before file upload begins to customize the request such as adding header and post parameters. |
onUpload | event.xhr: XmlHttpRequest instance. event.files: Uploaded files. |
Callback to invoke when file upload is complete. |
onError | event.xhr: XmlHttpRequest instance. event.files: Files that are not uploaded. |
Callback to invoke if file upload fails. |
onClear | -. | Callback to invoke when files in queue are removed without uploading. |
onSelect | event.originalEvent: Original browser event. event.files: List of selected files. |
Callback to invoke when file upload is complete. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-fileupload | Container element |
ui-fileupload-buttonbar | Header containing the buttons |
ui-fileupload-content | Content section |
None.
<p-growl [value]="msgs"></p-growl>
<p-fileUpload name="demo[]" url="http://localhost:3000/upload" (onUpload)="onUpload($event)"
multiple="multiple" accept="image/*" maxFileSize="1000000">
<template pTemplate type="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
</ul>
</template>
</p-fileUpload>
export class FileUploadDemo {
msgs: Message[];
uploadedFiles: any[] = [];
onUpload(event) {
for(let file of event.files) {
this.uploadedFiles.push(file);
}
this.msgs = [];
this.msgs.push({severity: 'info', summary: 'File Uploaded', detail: ''});
}
}