vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/fileupload/FileUpload.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<div class="p-fileupload p-component" v-if="isAdvanced"> <div class="p-fileupload p-component" v-if="isAdvanced">
<div class="p-fileupload-buttonbar"> <div class="p-fileupload-buttonbar">
<span icon="pi pi-plus" :class="advancedChooseButtonClass" v-ripple> <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" @focus="onFocus" @blur="onBlur" <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="disabled" />
: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-icon p-button-icon-left pi pi-fw pi-plus"></span>
<span class="p-button-text">{{chooseLabel}}</span> <span class="p-button-text">{{chooseLabel}}</span>
</span> </span>
@ -26,12 +25,11 @@
</div> </div>
</div> </div>
<div class="p-fileupload-empty" v-if="$scopedSlots.empty && !hasFiles"> <div class="p-fileupload-empty" v-if="$scopedSlots.empty && !hasFiles">
<slot name="empty"> <slot name="empty"></slot>
</slot>
</div> </div>
</div> </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="basicChooseButtonIconClass"></span>
<span class="p-button-text">{{basicChooseButtonLabel}}</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" /> <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(); this.clearInputElement();
} }
}, },
choose() {
this.$refs.fileInput.click();
},
upload() { upload() {
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
let formData = new FormData(); let formData = new FormData();
@ -272,9 +273,10 @@ export default {
} }
}, },
onBasicUploaderClick() { onBasicUploaderClick() {
if (this.hasFiles) { if (this.hasFiles)
this.upload(); this.upload();
} else
this.$refs.fileInput.click();
}, },
remove(index) { remove(index) {
this.clearInputElement(); this.clearInputElement();
@ -373,17 +375,6 @@ export default {
} }
.p-button.p-fileupload-choose input[type=file] { .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; display: none;
} }