Skip to content

Commit

Permalink
feat: Updates for Uploader component
Browse files Browse the repository at this point in the history
  • Loading branch information
rstoenescu committed Dec 30, 2016
1 parent 850e5a2 commit 3472070
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 4 deletions.
3 changes: 3 additions & 0 deletions dev/components/components/uploader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 12 additions & 4 deletions src/vue-components/uploader/Uploader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -18,6 +18,7 @@
:class="buttonClass"
v-html="computedLabel.add"
@click="$refs.file.click()"
:disabled="addButtonDisabled"
></button>
<button
v-if="!hideUploadButton"
Expand Down Expand Up @@ -95,7 +96,7 @@ export default {
type: String,
default: 'POST'
},
type: String,
extensions: String,
multiple: Boolean,
hideUploadButton: Boolean
},
Expand All @@ -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)
Expand Down
5 changes: 5 additions & 0 deletions src/vue-components/uploader/uploader.ios.styl
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
$uploader-font-size ?= .8rem
$uploader-progressbar-height ?= 3px
$uploader-img-max-height ?= 200px
$uploader-file-max-width ?= 200px
Expand All @@ -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
Expand Down
5 changes: 5 additions & 0 deletions src/vue-components/uploader/uploader.mat.styl
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
$uploader-font-size ?= .8rem
$uploader-progressbar-height ?= 3px
$uploader-img-max-height ?= 200px
$uploader-file-max-width ?= 200px
Expand All @@ -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
Expand Down

0 comments on commit 3472070

Please sign in to comment.