FileUpload

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

    
    import { FileUpload } from 'primeng/fileupload';
    
    

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

    Choose No file chosen
    
    <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.

    Browse
    
    <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
            #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
            #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 #file> </ng-template>
        <ng-template #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.

    Choose
    Drag and drop files to here to upload.
    
    <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 #empty>
            <div>Drag and drop files to here to upload.</div>
        </ng-template>
        <ng-template #content>
            <ul *ngIf="uploadedFiles.length">
                <li *ngFor="let file of uploadedFiles">{{ file.name }} - {{ file.size }} bytes</li>
            </ul>
        </ng-template>
    </p-fileupload>
    
    

    Screen Reader

    FileUpload uses a hidden native input element with type="file" for screen readers.

    Keyboard Support

    Interactive elements of the uploader are buttons, visit the Button accessibility section for more information.