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

Import


import {FileUploadModule} from 'primeng/primeng';

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="http://localhost:3000/upload"></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="http://localhost:3000/upload" 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="http://localhost:3000/upload" 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="http://localhost:3000/upload" 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="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.

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

Templating

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>

Request Customization

XHR request to upload the files can be customized using the onBeforeUpload callback that passes the xhr instance and FormData object as event parameters.

Attributes

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.

Events

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.

Styling

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

Dependencies

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