Fixed #1712

primefaces · Jan 5, 2017 · dc59c0d · dc59c0d
1 parent d3997e5
commit dc59c0d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/components/fileupload/fileupload.ts b/components/fileupload/fileupload.ts
@@ -18,6 +18,8 @@ import {PrimeTemplate,SharedModule} from '../common/shared';
 
                 <button *ngIf="!auto" type="button" [label]="uploadLabel" icon="fa-upload" pButton (click)="upload()" [disabled]="!hasFiles()"></button>
                 <button *ngIf="!auto" type="button" [label]="cancelLabel" icon="fa-close" pButton (click)="clear()" [disabled]="!hasFiles()"></button>
+            
+                <p-templateLoader [template]="toolbarTemplate"></p-templateLoader>
             </div>
             <div [ngClass]="{'ui-fileupload-content ui-widget-content ui-corner-bottom':true,'ui-fileupload-highlight':dragHighlight}" 
                 (dragenter)="onDragEnter($event)" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
@@ -101,6 +103,8 @@ export class FileUpload implements OnInit,AfterContentInit {
     public fileTemplate: TemplateRef<any>;
 
     public contentTemplate: TemplateRef<any>; 
+
+    public toolbarTemplate: TemplateRef<any>; 
 
     constructor(private sanitizer: DomSanitizer){}
 
@@ -119,6 +123,10 @@ export class FileUpload implements OnInit,AfterContentInit {
                     this.contentTemplate = item.template;
                 break;
 
+                case 'toolbar':
+                    this.toolbarTemplate = item.template;
+                break;
+
                 default:
                     this.fileTemplate = item.template;
                 break;

diff --git a/showcase/demo/fileupload/fileuploaddemo.html b/showcase/demo/fileupload/fileuploaddemo.html
@@ -84,13 +84,16 @@ <h3>File Size</h3>
             </ul>
 
             <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>
+            <p>File list UI is customizable using a template called "file" that gets the <a href="https://www.w3.org/TR/FileAPI/">File</a> instance as the implicit variable.
+                Second 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.  
+                Third and final template option is "toolbar" to display custom content at toolbar.</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;template pTemplate="toolbar"&gt;
+            &lt;div&gt;Upload 3 Files&lt;/div&gt;
+        &lt;/template&gt;  
         &lt;template let-file pTemplate="file"&gt;
             &lt;div&gt;Custom UI to display a file&lt;/div&gt;
         &lt;/template&gt;