Fixed #923

primefaces · Jun 9, 2017 · b32f0f4 · b32f0f4
1 parent f125d5c
commit b32f0f4
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 5 deletions.
diff --git a/src/app/components/fileupload/fileupload.css b/src/app/components/fileupload/fileupload.css
@@ -68,6 +68,38 @@
     border: 0 none;
 }
 
+/* Simple */
+.ui-fileupload-simple {
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.ui-fileupload-simple .ui-button {
+    overflow: hidden;
+}
+
+.ui-fileupload-simple input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 100px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    outline: none;
+    background: white;
+    cursor: inherit;
+    display: block;
+}
+
+.ui-fileupload-simple .ui-fileupload-filename {
+    margin-left: 0.5em;
+}
+
 /* ui-fluid */
 .ui-fluid .ui-fileupload .ui-button {
     width: auto;

diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts
@@ -10,7 +10,7 @@ import {PrimeTemplate,SharedModule} from '../common/shared';
 @Component({
     selector: 'p-fileUpload',
     template: `
-        <div [ngClass]="'ui-fileupload ui-widget'" [ngStyle]="style" [class]="styleClass">
+        <div [ngClass]="'ui-fileupload ui-widget'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'">
             <div class="ui-fileupload-buttonbar ui-widget-header ui-corner-top">
                 <button type="button" [label]="chooseLabel" icon="fa-plus" pButton class="ui-fileupload-choose" (click)="onChooseClick($event, fileinput)" [disabled]="disabled"> 
                     <input #fileinput type="file" (change)="onFileSelect($event)" [multiple]="multiple" [accept]="accept" [disabled]="disabled">
@@ -40,10 +40,17 @@ import {PrimeTemplate,SharedModule} from '../common/shared';
                         <ng-template ngFor [ngForOf]="files" [ngForTemplate]="fileTemplate"></ng-template>
                     </div>
                 </div>
-                
                 <p-templateLoader [template]="contentTemplate"></p-templateLoader>
             </div>
         </div>
+        <span class="ui-fileupload-simple ui-widget" *ngIf="mode === 'basic'">
+            <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                <span class="ui-button-icon-left fa fa-plus"></span>
+                <span class="ui-button-text ui-c">Choose</span>
+                <input type="file" [accept]="accept" [disabled]="disabled" tabindex="-1" (change)="onFileSelect($event)">
+            </button>
+            <span class="ui-fileupload-filename" *ngIf="files&&files[0]">{{files[0].name}}</span>
+        </span>
     `
 })
 export class FileUpload implements OnInit,AfterContentInit {
@@ -85,6 +92,8 @@ export class FileUpload implements OnInit,AfterContentInit {
     @Input() uploadLabel: string = 'Upload';
 
     @Input() cancelLabel: string = 'Cancel';
+
+    @Input() mode: string = 'advanced';
 
     @Output() onBeforeUpload: EventEmitter<any> = new EventEmitter();
 
@@ -151,7 +160,7 @@ export class FileUpload implements OnInit,AfterContentInit {
 
     onFileSelect(event) {
         this.msgs = [];
-        if(!this.multiple) {
+        if(!this.multiple || this.isBasic()) {
             this.files = [];
         }
 
@@ -174,6 +183,10 @@ export class FileUpload implements OnInit,AfterContentInit {
         }
     }
 
+    isBasic(): boolean {
+        return this.mode === 'basic';
+    }
+
     validate(file: File): boolean {
         if(this.accept && !this.isFileTypeValid(file)) {
             this.msgs.push({

diff --git a/src/app/showcase/components/fileupload/fileuploaddemo.html b/src/app/showcase/components/fileupload/fileuploaddemo.html
@@ -9,14 +9,24 @@
 <div class="content-section implementation">
     <p-growl [value]="msgs"></p-growl>
 
-    <p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)" 
+    <h3 class="first">Advanced</h3>
+    <p-fileUpload name="demo[]" url="http://localhost:3000/upload" (onUpload)="onUpload($event)" 
             multiple="multiple" accept="image/*" maxFileSize="1000000"> 
             <ng-template pTemplate="content">
                 <ul *ngIf="uploadedFiles.length">
                     <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                 </ul>
             </ng-template>    
     </p-fileUpload>
+
+    <h3>Basic</h3>
+    <p-fileUpload mode="basic" name="demo[]" url="http://localhost:3000/upload" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)"></p-fileUpload>
+    <br /><br />
+    <button type="button" pButton (click)="fub.upload()" class="ui-button-success" label="Upload"></button>
+
+    <h3>Basic with Auto</h3>
+    <p-fileUpload #fubauto mode="basic" name="demo[]" url="http://localhost:3000/upload" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" auto="true"></p-fileUpload>
+
 </div>
 
 <div class="content-section source">
@@ -107,6 +117,23 @@ <h3>Templating</h3>
             <h3>Request Customization</h3>
             <p>XHR request to upload the files can be customized using the onBeforeUpload callback that passes
                 the xhr instance and FormData object as event parameters.</p>
+
+            <h3>Basic UI</h3>
+            <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
+<pre>
+<code class="language-markup" pCode ngNonBindable>
+&lt;p-fileUpload mode="basic" name="demo[]" url="http://localhost:3000/upload" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)" auto="true"&gt;&lt;/p-fileUpload&gt;
+</code>
+</pre>
+
+            <p>FileUpload above instantly uploads the file after selecting it because of the auto mode, in case you'd like to upload manually define a local template variable to access the component
+            and call upload() method.</p>
+<pre>
+<code class="language-markup" pCode ngNonBindable>
+&lt;p-fileUpload #fub mode="basic" name="demo[]" url="http://localhost:3000/upload" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)"&gt;&lt;/p-fileUpload&gt;
+&lt;button type="button" pButton (click)="fub.upload()" class="ui-button-success" label="Upload"&gt;&lt;/button&gt;
+</code>
+</pre>
 
             <h3>Properties</h3>
             <div class="doc-tablewrapper">
@@ -234,6 +261,12 @@ <h3>Properties</h3>
                             <td>false</td>
                             <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
                         </tr>
+                        <tr>
+                            <td>mode</td>
+                            <td>string</td>
+                            <td>advanced</td>
+                            <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -332,6 +365,7 @@ <h3>Dependencies</h3>
 <code class="language-markup" pCode ngNonBindable>
 &lt;p-growl [value]="msgs"&gt;&lt;/p-growl&gt;
 
+&lt;h3 class="first"&gt;Advanced&lt;/h3&gt;
 &lt;p-fileUpload name="demo[]" url="http://localhost:3000/upload" (onUpload)="onUpload($event)" 
         multiple="multiple" accept="image/*" maxFileSize="1000000"&gt;
     &lt;ng-template pTemplate type="content"&gt;
@@ -340,6 +374,13 @@ <h3>Dependencies</h3>
         &lt;/ul&gt;
     &lt;/ng-template&gt;        
 &lt;/p-fileUpload&gt;
+
+&lt;h3&gt;Basic&lt;/h3&gt;
+&lt;p-fileUpload mode="basic" name="demo[]" url="http://localhost:3000/upload" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)"&gt;&lt;/p-fileUpload&gt;
+&lt;button type="button" pButton (click)="fub.upload()" class="ui-button-success" label="Upload"&gt;&lt;/button&gt;
+
+&lt;h3&gt;Basic with Auto&lt;/h3&gt;
+&lt;p-fileUpload #fubauto mode="basic" name="demo[]" url="http://localhost:3000/upload" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" auto="true"&gt;&lt;/p-fileUpload&gt;
 </code>
 </pre>
 

diff --git a/src/app/showcase/components/fileupload/fileuploaddemo.module.ts b/src/app/showcase/components/fileupload/fileuploaddemo.module.ts
@@ -4,6 +4,7 @@ import {FileUploadDemo} from './fileuploaddemo';
 import {FileUploadDemoRoutingModule} from './fileuploaddemo-routing.module';
 import {FileUploadModule} from '../../../components/fileupload/fileupload';
 import {GrowlModule} from '../../../components/growl/growl';
+import {ButtonModule} from '../../../components/button/button';
 import {TabViewModule} from '../../../components/tabview/tabview';
 import {CodeHighlighterModule} from '../../../components/codehighlighter/codehighlighter';
 
@@ -13,6 +14,7 @@ import {CodeHighlighterModule} from '../../../components/codehighlighter/codehig
 		FileUploadDemoRoutingModule,
         FileUploadModule,
         GrowlModule,
+        ButtonModule,
         TabViewModule,
         CodeHighlighterModule
 	],

diff --git a/src/app/showcase/components/fileupload/fileuploaddemo.ts b/src/app/showcase/components/fileupload/fileuploaddemo.ts
@@ -16,6 +16,16 @@ export class FileUploadDemo {
         }
 
         this.msgs = [];
-        this.msgs.push({severity: 'info', summary: 'File Uploaded', detail: ''});
+        this.msgs.push({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
+    }
+
+    onBasicUpload(event) {        
+        this.msgs = [];
+        this.msgs.push({severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode'});
+    }
+
+    onBasicUploadAuto(event) {        
+        this.msgs = [];
+        this.msgs.push({severity: 'info', summary: 'Success', detail: 'File Uploaded with Auto Mode'});
     }
 }