Permalink
Browse files

feat: Updates for Uploader component

  • Loading branch information...
1 parent 850e5a2 commit 3472070e97c6b94832f6e62382380833cb7253fe @rstoenescu rstoenescu committed Dec 30, 2016
@@ -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>
@@ -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)
@@ -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
@@ -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

0 comments on commit 3472070

Please sign in to comment.