diff --git a/components/fileupload/fileupload.ts b/components/fileupload/fileupload.ts index 00f675f84c8..fe17dd179e8 100644 --- a/components/fileupload/fileupload.ts +++ b/components/fileupload/fileupload.ts @@ -18,6 +18,8 @@ import {PrimeTemplate,SharedModule} from '../common/shared'; + +
@@ -101,6 +103,8 @@ export class FileUpload implements OnInit,AfterContentInit { public fileTemplate: TemplateRef; public contentTemplate: TemplateRef; + + public toolbarTemplate: TemplateRef; 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 index 4960658f6f7..3c02125896b 100644 --- a/showcase/demo/fileupload/fileuploaddemo.html +++ b/showcase/demo/fileupload/fileuploaddemo.html @@ -84,13 +84,16 @@

File Size

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.

+

File list UI is customizable using a template called "file" that gets the File 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-fileUpload name="myfile[]" url="http://localhost:3000/upload" multiple="multiple"
         accept="image/*" maxFileSize="1000000">
+        <template pTemplate="toolbar">
+            <div>Upload 3 Files</div>
+        </template>  
         <template let-file pTemplate="file">
             <div>Custom UI to display a file</div>
         </template>