Simple uploader mode

src/components/fileupload/FileUpload.vue

@@ -27,6 +27,11 @@
             </div>  
         </div>
     </div>
+    <span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic">
+        <span :class="basicChooseButtonIconClass"></span>
+        <span class="p-button-text p-clickable">{{basicChooseButtonLabel}}</span>
+        <input ref="fileInput" type="file" :accept="accept" :disabled="disabled" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
+    </span>
 </template>
 
 <script>
@@ -119,11 +124,13 @@ export default {
 
             this.$emit('select', {originalEvent: event, files: files});   
 
-            if (this.auto && this.hasFiles()) {
+            if (this.auto && this.hasFiles) {
                 this.upload();
             }
 
-            this.clearInputElement();
+            if (this.isAdvanced) {
+                this.clearInputElement();
+            }
         },
         upload() {
             let xhr = new XMLHttpRequest();
@@ -185,7 +192,10 @@ export default {
             this.files = null;
             this.messages = null;
             this.$emit('clear');
-            this.clearInputElement();
+
+            if (this.isAdvanced) {
+                this.clearInputElement();
+            } 
         },
         onFocus() {
             this.focused = true;
@@ -222,6 +232,11 @@ export default {
         },
         onDrop() {
 
+        },
+        onBasicUploaderClick() {
+            if (this.hasFiles) {
+                this.upload();
+            }
         },
         remove(index) {
             this.clearInputElement();
@@ -232,9 +247,6 @@ export default {
         },
         clearInputElement() {
             this.$refs.fileInput.value = '';
-            if (this.mode === 'basic') {
-                this.$refs.fileInput.style.display = 'inline';
-            }
         },
         formatSize(bytes) {
             if (bytes === 0) {
@@ -262,6 +274,22 @@ export default {
                 }
             ];
         },
+        basicChooseButtonClass() {
+            return ['p-button p-fileupload-choose p-component p-button-text-icon-left', {
+                'p-fileupload-choose-selected': this.hasFiles,
+                'p-disabled': this.disabled,
+                'p-focus': this.focused
+            }];
+        },
+        basicChooseButtonIconClass() {
+            return ['p-button-icon-left pi', {
+                'pi-plus': !this.hasFiles || this.auto, 
+                'pi-upload': this.hasFiles && !this.auto
+            }];
+        },
+        basicChooseButtonLabel() {
+            return this.auto ? this.chooseLabel : (this.hasFiles ? this.files[0].name : this.chooseLabel);
+        },
         hasFiles() {
             return this.files && this.files.length > 0;
         }

src/views/fileupload/FileUploadDemo.vue

@@ -10,6 +10,12 @@
         <div class="content-section implementation">
             <h3>Advanced</h3>
             <FileUpload name="demo[]" url="http://192.168.1.110:4000/upload" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
+
+            <h3>Basic</h3>
+            <FileUpload mode="basic" name="demo[]" url="http://192.168.1.110:4000/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+            
+            <h3>Basic with Auto</h3>
+            <FileUpload mode="basic" name="demo[]" url="http://192.168.1.110:4000/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
         </div>
     </div>
 </template>