feat: Updates for Uploader component

quasarframework · Dec 30, 2016 · 3472070 · 3472070
1 parent 850e5a2
commit 3472070
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/dev/components/components/uploader.vue b/dev/components/components/uploader.vue
@@ -2,6 +2,9 @@
   <div>
     <div class="layout-padding">
       <input type="text" v-model="url" />
+      <p class="caption">Single File Upload</p>
+      <q-uploader :url="url" />
+      <p class="caption">Multiple File Upload</p>
       <q-uploader multiple :url="url" />
     </div>
   </div>

diff --git a/src/vue-components/uploader/Uploader.vue b/src/vue-components/uploader/Uploader.vue
@@ -3,13 +3,13 @@
     <input
       type="file"
       ref="file"
-      :accept="type"
+      :accept="extensions"
       :multiple="multiple"
       @change="__add"
     >
 
     <div v-if="uploading">
-      <span class="chip label bg-light">
+      <span class="chip label bg-light q-uploader-progress">
         <span v-html="computedLabel.uploading"></span> <spinner :size="15"></spinner> {{ progress }}%
       </span>
     </div>
@@ -18,6 +18,7 @@
         :class="buttonClass"
         v-html="computedLabel.add"
         @click="$refs.file.click()"
+        :disabled="addButtonDisabled"
       ></button>
       <button
         v-if="!hideUploadButton"
@@ -95,7 +96,7 @@ export default {
       type: String,
       default: 'POST'
     },
-    type: String,
+    extensions: String,
     multiple: Boolean,
     hideUploadButton: Boolean
   },
@@ -115,16 +116,23 @@ export default {
     },
     computedLabel () {
       return Utils.extend({
-        add: '<i>add</i> Add File',
+        add: this.multiple ? '<i>add</i> Add Files' : '<i>add</i> Pick File',
         remove: '<i>clear</i> Remove',
         upload: '<i>file_upload</i> Upload',
         failed: '<i>warning</i> Failed',
         uploading: 'Uploading...'
       }, this.labels)
+    },
+    addButtonDisabled () {
+      return !this.multiple && this.files.length >= 1
     }
   },
   methods: {
     __add (e) {
+      if (!this.multiple && this.files.length >= 1) {
+        return
+      }
+
       let files = Array.prototype.slice.call(e.target.files)
       this.$emit('add', files)
 

diff --git a/src/vue-components/uploader/uploader.ios.styl b/src/vue-components/uploader/uploader.ios.styl
@@ -1,3 +1,4 @@
+$uploader-font-size          ?= .8rem
 $uploader-progressbar-height ?= 3px
 $uploader-img-max-height     ?= 200px
 $uploader-file-max-width     ?= 200px
@@ -9,6 +10,10 @@ $uploader-failed-background  ?= $negative
     max-width $uploader-file-max-width
     img
       max-height $uploader-img-max-height
+  .card-title, .card-content
+    font-size $uploader-font-size
+  .card-content
+    padding 10px
   input
     display none
   .q-progress

diff --git a/src/vue-components/uploader/uploader.mat.styl b/src/vue-components/uploader/uploader.mat.styl
@@ -1,3 +1,4 @@
+$uploader-font-size          ?= .8rem
 $uploader-progressbar-height ?= 3px
 $uploader-img-max-height     ?= 200px
 $uploader-file-max-width     ?= 200px
@@ -9,6 +10,10 @@ $uploader-failed-background  ?= $negative
     max-width $uploader-file-max-width
     img
       max-height $uploader-img-max-height
+  .card-title, .card-content
+    font-size $uploader-font-size
+  .card-content
+    padding 10px
   input
     display none
   .q-progress