Fixed #824

primefaces · Sep 2, 2016 · c25eaa9 · c25eaa9
1 parent 580a7b6
commit c25eaa9
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 29 deletions.
diff --git a/components/common/shared.ts b/components/common/shared.ts
@@ -151,9 +151,26 @@ export class ColumnFooterTemplateLoader {
     }
 }
 
+@Component({
+    selector: 'p-templateLoader',
+    template: ``
+})
+export class TemplateLoader {
+
+    @Input() template: TemplateRef<any>;
+
+    constructor(protected viewContainer: ViewContainerRef) {}
+
+    ngOnInit() {
+        if(this.template) {
+            this.viewContainer.createEmbeddedView(this.template, {});
+        }
+    }
+}
+
 @NgModule({
     imports: [CommonModule],
-    exports: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate],
-    declarations: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate]
+    exports: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate,TemplateLoader],
+    declarations: [Header,Footer,Column,TemplateWrapper,ColumnHeaderTemplateLoader,ColumnBodyTemplateLoader,ColumnFooterTemplateLoader,PrimeTemplate,TemplateLoader]
 })
 export class SharedModule { }
diff --git a/components/fileupload/fileupload.ts b/components/fileupload/fileupload.ts
@@ -1,10 +1,11 @@
-import {NgModule,Component,OnInit,Input,Output,EventEmitter} from '@angular/core';
+import {NgModule,Component,OnInit,Input,Output,EventEmitter,TemplateRef,AfterContentInit,ContentChildren,QueryList} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {DomSanitizationService} from '@angular/platform-browser';
 import {ButtonModule} from '../button/button';
 import {MessagesModule} from '../messages/messages';
 import {ProgressBarModule} from '../progressbar/progressbar';
 import {Message} from '../common/api';
+import {PrimeTemplate,SharedModule} from '../common/shared';
 
 @Component({
     selector: 'p-fileUpload',
@@ -25,20 +26,25 @@ import {Message} from '../common/api';
                 <p-messages [value]="msgs"></p-messages>
                 
                 <div class="ui-fileupload-files" *ngIf="hasFiles()">
-                    <div class="ui-fileupload-row" *ngFor="let file of files;let i = index;">
-                        <div><img [src]="file.objectURL" *ngIf="isImage(file)" [width]="previewWidth" /></div>
-                        <div>{{file.name}}</div>
-                        <div>{{formatSize(file.size)}}</div>
-                        <div><button type="button" icon="fa-close" pButton (click)="remove(i)"></button></div>
+                    <div *ngIf="!fileTemplate">
+                        <div class="ui-fileupload-row" *ngFor="let file of files">
+                            <div><img [src]="file.objectURL" *ngIf="isImage(file)" [width]="previewWidth" /></div>
+                            <div>{{file.name}}</div>
+                            <div>{{formatSize(file.size)}}</div>
+                            <div><button type="button" icon="fa-close" pButton (click)="remove(i)"></button></div>
+                        </div>
+                    </div>
+                    <div *ngIf="fileTemplate">
+                        <template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate"></template>
                     </div>
                 </div>
                 
-                <ng-content></ng-content>
+                <p-templateLoader [template]="contentTemplate"></p-templateLoader>
             </div>
         </div>
     `
 })
-export class FileUpload implements OnInit {
+export class FileUpload implements OnInit,AfterContentInit {
 
     @Input() name: string;
 
@@ -73,21 +79,45 @@ export class FileUpload implements OnInit {
     @Output() onClear: EventEmitter<any> = new EventEmitter();
 
     @Output() onSelect: EventEmitter<any> = new EventEmitter();
+
+    @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
-    files: File[];
+    protected files: File[];
+
+    protected progress: number = 0;
 
-    progress: number = 0;
+    protected dragHighlight: boolean;
 
-    dragHighlight: boolean;
+    protected msgs: Message[];
 
-    msgs: Message[];
+    protected fileTemplate: TemplateRef<any>;
 
+    protected contentTemplate: TemplateRef<any>; 
+
     constructor(private sanitizer:DomSanitizationService){}
 
     ngOnInit() {
         this.files = [];
     }
 
+    ngAfterContentInit():void {
+        this.templates.forEach((item) => {
+            switch(item.type) {
+                case 'file':
+                    this.fileTemplate = item.template;
+                break;
+
+                case 'content':
+                    this.contentTemplate = item.template;
+                break;
+
+                default:
+                    this.fileTemplate = item.template;
+                break;
+            }
+        });
+    }
+
     onChooseClick(event, fileInput) {
         fileInput.value = null;
         fileInput.click();
@@ -230,8 +260,8 @@ export class FileUpload implements OnInit {
 }
 
 @NgModule({
-    imports: [CommonModule,ButtonModule,ProgressBarModule,MessagesModule],
-    exports: [FileUpload,ButtonModule,ProgressBarModule,MessagesModule],
+    imports: [CommonModule,SharedModule,ButtonModule,ProgressBarModule,MessagesModule],
+    exports: [FileUpload,SharedModule,ButtonModule,ProgressBarModule,MessagesModule],
     declarations: [FileUpload]
 })
 export class FileUploadModule { }
diff --git a/showcase/demo/fileupload/fileuploaddemo.html b/showcase/demo/fileupload/fileuploaddemo.html
@@ -9,12 +9,13 @@
 <div class="ContentSideSections Implementation">
     <p-growl [value]="msgs"></p-growl>
 
-    <p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)" 
-            multiple="multiple" accept="image/*" maxFileSize="1000000">
-
-            <ul *ngIf="uploadedFiles.length">
-                <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
-            </ul>
+    <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>
 </div>
 
@@ -82,14 +83,20 @@ <h3>File Size</h3>
                 <li>invalidFileSizeMessageDetail: string = 'maximum upload size is &#123;0&#125;.'</li>
             </ul>
 
-            <h3>Content</h3>
-            <p>Custom content can be placed inside the content section as well, this can be useful to implement a user interface
-                to manage the uploaded files such as removing them.</p>
+            <h3>Templating</h3>
+            <p>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 <a href="https://www.w3.org/TR/FileAPI/">File</a> instance a the implicit variable.</p>
 <pre>
 <code class="language-markup" pCode>
 &lt;p-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
         accept="image/*" maxFileSize="1000000"&gt;
-        &lt;div&gt;Custom UI to manage uploaded files&lt;/div&gt;
+        &lt;template let-file pTemplate type="file"&gt;
+            &lt;div&gt;Custom UI to display a file&lt;/div&gt;
+        &lt;/template&gt; 
+        &lt;template pTemplate type="content"&gt;
+            &lt;div&gt;Custom UI to manage uploaded files&lt;/div&gt;
+        &lt;/template&gt;  
 &lt;/p-fileUpload&gt;
 </code>
 </pre>
@@ -263,9 +270,11 @@ <h3>Dependencies</h3>
 
 &lt;p-fileUpload name="demo[]" url="http://localhost:3000/upload" (onUpload)="onUpload($event)" 
         multiple="multiple" accept="image/*" maxFileSize="1000000"&gt;
-    &lt;ul *ngIf="uploadedFiles.length"&gt;
-        &lt;li *ngFor="let file of uploadedFiles"&gt;&#123;&#123;file.name&#125;&#125; - &#123;&#123;file.size&#125;&#125; bytes&lt;/li&gt;
-    &lt;/ul&gt;        
+    &lt;template pTemplate type="content"&gt;
+        &lt;ul *ngIf="uploadedFiles.length"&gt;
+            &lt;li *ngFor="let file of uploadedFiles"&gt;&#123;&#123;file.name&#125;&#125; - &#123;&#123;file.size&#125;&#125; bytes&lt;/li&gt;
+        &lt;/ul&gt;
+    &lt;/template&gt;        
 &lt;/p-fileUpload&gt;
 </code>
 </pre>