Fixes #15435 - FileUpload | Templating enhancements

primefaces · May 9, 2024 · fbde11b · fbde11b
1 parent c9351b4
commit fbde11b
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 16 deletions.
diff --git a/src/app/components/fileupload/fileupload.interface.ts b/src/app/components/fileupload/fileupload.interface.ts
@@ -12,6 +12,20 @@ export interface UploadEvent {
      */
     originalEvent: HttpEvent<any>;
 }
+/**
+ * Remove uploaded file event.
+ * @group Events
+ */
+export interface RemoveUploadedFileEvent {
+    /**
+     * Removed file.
+     */
+    file: any;
+    /**
+     * Uploaded files.
+     */
+    files: any[];
+}
 /**
  * Form data event.
  * @group Events
@@ -128,6 +142,31 @@ export interface FileUploadTemplates {
      * Custom template of file.
      */
     file(): TemplateRef<any>;
+    /**
+     * Custom template of file.
+     */
+    header(context: {
+        /**
+         * File list.
+         */
+        $implicit: any;
+        /**
+         * Uploaded files list.
+         */
+        uploadedFiles: any;
+        /**
+         * Callback to invoke on choose button click.
+         */
+        chooseCallback: VoidFunction;
+        /**
+         * Callback to invoke on clear button click.
+         */
+        clearCallback: VoidFunction;
+        /**
+         * Callback to invoke on upload.
+         */
+        uploadCallback: VoidFunction;
+    }): TemplateRef<any>;
     /**
      * Custom template of content.
      */
@@ -136,7 +175,40 @@ export interface FileUploadTemplates {
          * File list.
          */
         $implicit: any;
-    }): TemplateRef<{ $implicit: any }>;
+        /**
+         * Uploaded files list.
+         */
+        uploadedFiles: any;
+        /**
+         * Upload progress.
+         */
+        progress: any;
+        /**
+         * Status messages about upload process.
+         */
+        messages: any;
+        /**
+         * Callback to invoke on choose button click.
+         */
+        chooseCallback: VoidFunction;
+        /**
+         * Callback to invoke on clear button click.
+         */
+        removeFileCallback: VoidFunction;
+        /**
+         * Callback to invoke on clear button click.
+         */
+        clearCallback: VoidFunction;
+        /**
+         * Callback to invoke on upload.
+         */
+        uploadCallback: VoidFunction;
+        /**
+         * Callback to invoke on remove uploaded file, accepts index as a parameter.
+         * @param index Index of the file to remove.
+         */
+        removeUploadedFileCallback: VoidFunction;
+    }): TemplateRef<any>;
     /**
      * Custom template of toolbar.
      */

diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts
@@ -23,7 +23,8 @@ import {
     ViewChild,
     ViewEncapsulation,
     booleanAttribute,
-    numberAttribute
+    numberAttribute,
+    signal
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { BlockableUI, Message, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';
@@ -37,7 +38,7 @@ import { ProgressBarModule } from 'primeng/progressbar';
 import { RippleModule } from 'primeng/ripple';
 import { VoidListener } from 'primeng/ts-helpers';
 import { Subscription } from 'rxjs';
-import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent } from './fileupload.interface';
+import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent, RemoveUploadedFileEvent } from './fileupload.interface';
 /**
  * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
  * @group Components
@@ -46,6 +47,18 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv
     selector: 'p-fileUpload',
     template: `
         <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'" [attr.data-pc-name]="'fileupload'" [attr.data-pc-section]="'root'">
+            <input
+                [attr.aria-label]="browseFilesLabel"
+                #advancedfileinput
+                type="file"
+                (change)="onFileSelect($event)"
+                [multiple]="multiple"
+                [accept]="accept"
+                [disabled]="disabled || isChooseDisabled()"
+                [attr.title]="''"
+                [attr.data-pc-section]="'input'"
+                [style.display]="'none'"
+            />
             <div class="p-fileupload-buttonbar" [attr.data-pc-section]="'buttonbar'">
                 <ng-container *ngIf="!headerTemplate">
                     <span
@@ -100,7 +113,7 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv
                         </ng-container>
                     </p-button>
                 </ng-container>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: files, uploadedFiles: uploadedFiles, chooseCallback: choose.bind(this), clearCallback: clear.bind(this), uploadCallback: upload.bind(this) }"></ng-container>
                 <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
             </div>
             <div #content class="p-fileupload-content" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" [attr.data-pc-section]="'content'">
@@ -126,7 +139,7 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv
                         <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate"></ng-template>
                     </div>
                 </div>
-                <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: files }"></ng-container>
+                <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: files, uploadedFiles: uploadedFiles, removeUploadedFileCallback: removeUploadedFile.bind(this), progress: progress, messages: msgs }"></ng-container>
                 <div *ngIf="emptyTemplate && !hasFiles() && !uploadedFileCount" class="p-fileupload-empty">
                     <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
                 </div>
@@ -417,6 +430,12 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
      * @group Emits
      */
     @Output() onImageError: EventEmitter<Event> = new EventEmitter<Event>();
+    /**
+     * This event is triggered if an error occurs while loading an image file.
+     * @param {RemoveUploadedFileEvent} event - Remove event.
+     * @group Emits
+     */
+    @Output() onRemoveUploadedFile: EventEmitter<RemoveUploadedFileEvent> = new EventEmitter<RemoveUploadedFileEvent>();
 
     @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;
 
@@ -490,6 +509,8 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
 
     dragOverListener: VoidListener;
 
+    public uploadedFiles = [];
+
     constructor(
         @Inject(DOCUMENT) private document: Document,
         @Inject(PLATFORM_ID) private platformId: any,
@@ -741,7 +762,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
                                 } else {
                                     this.onError.emit({ files: this.files });
                                 }
-
+                                this.uploadedFiles.push(...this.files);
                                 this.clear();
                                 break;
                             case HttpEventType.UploadProgress: {
@@ -774,13 +795,28 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
         this.clearInputElement();
         this.cd.markForCheck();
     }
-
+    /**
+     * Removes a single file.
+     * @param {Event} event - Browser event.
+     * @param {Number} index - Index of the file.
+     * @group Method
+     */
     remove(event: Event, index: number) {
         this.clearInputElement();
         this.onRemove.emit({ originalEvent: event, file: this.files[index] });
         this.files.splice(index, 1);
         this.checkFileLimit(this.files);
     }
+    /**
+     * Removes uploaded file.
+     * @param {Number} index - Index of the file to be removed.
+     * @group Method
+     */
+    removeUploadedFile(index) {
+        let removedFile = this.uploadedFiles.splice(index, 1)[0];
+        this.uploadedFiles = [...this.uploadedFiles];
+        this.onRemoveUploadedFile.emit({ file: removedFile, files: this.uploadedFiles });
+    }
 
     isFileLimitExceeded() {
         const isAutoMode = this.auto;

diff --git a/src/app/showcase/doc/fileupload/templatedoc.ts b/src/app/showcase/doc/fileupload/templatedoc.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Code } from '@domain/code';
+import { PrimeNGConfig } from 'primeng/api';
 
 @Component({
     selector: 'file-upload-template-demo',
@@ -13,20 +14,20 @@ import { Code } from '@domain/code';
         >
         <div class="card">
             <p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000">
-                <ng-template let-file pTemplate="header">
+                <ng-template pTemplate="header" let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback" let-files="files">
                     <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
                         <div class="flex gap-2">
-                            <p-button (click)="chooseCallback()" icon="pi pi-images" [rounded]="true" [outlined]="true" />
-                            <p-button (click)="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" [rounded]="true" [outlined]="true" severity="success" [disabled]="!files || files.length === 0" />
-                            <p-button (click)="clearCallback()" icon="pi pi-times" [rounded]="true" [outlined]="true" severity="danger" [disabled]="!files || files.length === 0" />
+                            <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" styleClass="md:w-20rem h-1rem w-full md:ml-auto" [ngClass]="{ 'exceeded-progress-bar': totalSizePercent > 100 }">
                             <span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
                         </p-progressBar>
                     </div>
                 </ng-template>
-                <ng-template pTemplate="content" let-files>
-                    <div *ngIf="files.length > 0">
+                <ng-template pTemplate="content" let-files let-uploadedFiles="uploadedFiles" let-removeFileCallback="removeFileCallback" let-removeUploadedFileCallback="removeUploadedFileCallback">
+                    <div *ngIf="uploadedFiles?.length > 0">
                         <h5>Pending</h5>
                         <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                             <div *ngFor="let file of files; let i = index" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
@@ -36,7 +37,6 @@ import { Code } from '@domain/code';
                                 <span class="font-semibold">{{ file.name }}</span>
                                 <div>{{ formatSize(file.size) }}</div>
                                 <p-badge value="Pending" severity="warning" />
-                                <p-button icon="pi pi-times" (click)="onRemoveTemplatingFile(file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
                             </div>
                         </div>
                     </div>
@@ -50,7 +50,7 @@ import { Code } from '@domain/code';
                                 <span class="font-semibold">{{ file.name }}</span>
                                 <div>{{ formatSize(file.size) }}</div>
                                 <p-badge value="Completed" class="mt-3" severity="success" />
-                                <p-button icon="pi pi-times" (click)="removeUploadedFileCallback(index)" [outlined]="true" [rounded]="true" severity="danger" />
+                                <p-button icon="pi pi-times" (onClick)="removeUploadedFileCallback(index)" [outlined]="true" [rounded]="true" severity="danger" />
                             </div>
                         </div>
                     </div>
@@ -67,6 +67,34 @@ import { Code } from '@domain/code';
     `
 })
 export class TemplateDoc {
+    config = inject(PrimeNGConfig);
+
+    choose(event, callback) {
+        callback();
+    }
+
+    onRemoveTemplatingFile(event, file, removeFileCallback, index) {
+        removeFileCallback(event, index);
+    }
+
+    uploadEvent(callback) {
+        callback();
+    }
+
+    formatSize(bytes) {
+        const k = 1024;
+        const dm = 3;
+        const sizes = this.config.translation.fileSizeTypes;
+        if (bytes === 0) {
+            return `0 \${sizes[0]}`;
+        }
+
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+        return `${formattedSize} ${sizes[i]}`;
+    }
+
     code: Code = {
         basic: `<p-fileUpload name="myfile[]" url="https://www.primefaces.org/cdn/api/upload.php" [multiple]="true" accept="image/*" maxFileSize="1000000">
     <ng-template pTemplate="toolbar">