Reimplemented fileupload choose button events

pull/358/head
cagataycivici 2020-06-27 12:45:33 +03:00
parent c547b037fd
commit e322348fba
1 changed files with 10 additions and 19 deletions

View File

@ -1,9 +1,8 @@
<template>
<div class="p-fileupload p-component" v-if="isAdvanced">
<div class="p-fileupload-buttonbar">
<span icon="pi pi-plus" :class="advancedChooseButtonClass" v-ripple>
<input ref="fileInput" type="file" @change="onFileSelect" @focus="onFocus" @blur="onBlur"
:multiple="multiple" :accept="accept" :disabled="disabled" />
<span icon="pi pi-plus" :class="advancedChooseButtonClass" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" >
<input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="disabled" />
<span class="p-button-icon p-button-icon-left pi pi-fw pi-plus"></span>
<span class="p-button-text">{{chooseLabel}}</span>
</span>
@ -26,12 +25,11 @@
</div>
</div>
<div class="p-fileupload-empty" v-if="$scopedSlots.empty && !hasFiles">
<slot name="empty">
</slot>
<slot name="empty"></slot>
</div>
</div>
</div>
<span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic" v-ripple>
<span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-ripple tabindex="0" >
<span :class="basicChooseButtonIconClass"></span>
<span class="p-button-text">{{basicChooseButtonLabel}}</span>
<input ref="fileInput" type="file" :accept="accept" :disabled="disabled" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-if="!hasFiles" />
@ -147,6 +145,9 @@ export default {
this.clearInputElement();
}
},
choose() {
this.$refs.fileInput.click();
},
upload() {
let xhr = new XMLHttpRequest();
let formData = new FormData();
@ -272,9 +273,10 @@ export default {
}
},
onBasicUploaderClick() {
if (this.hasFiles) {
if (this.hasFiles)
this.upload();
}
else
this.$refs.fileInput.click();
},
remove(index) {
this.clearInputElement();
@ -373,17 +375,6 @@ export default {
}
.p-button.p-fileupload-choose input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
direction: ltr;
cursor: pointer;
display: none;
}