Files
system/components/media/FileUpload.vue
Xuan Loi ae1ea57130 changes
2026-01-09 17:25:23 +07:00

69 lines
2.2 KiB
Vue

<template>
<div>
<div class="file is-primary" id="ignore" v-if="position==='left'">
<label class="file-label">
<input class="file-input" type="file" :id="docid" multiple name="resume" @change="doChange">
<span class="file-cta px-2">
<span class="icon-text is-clickable">
<SvgIcon v-bind="{name: 'attach-file.svg', type: 'white', size: 22}"></SvgIcon>
<!--<span class="has-text-white">File</span>-->
</span>
</span>
</label>
</div>
<div class="field is-grouped is-grouped-right" id="ignore" v-else>
<div class="control">
<div class="file is-primary">
<label class="file-label">
<input class="file-input" type="file" :id="docid" multiple name="resume" @change="doChange">
<span class="file-cta px-1">
<span class="icon-text is-clickable">
<SvgIcon v-bind="{name: 'attach-file.svg', type: 'white', size: 22}"></SvgIcon>
<!--<span class="has-text-white">File</span>-->
</span>
</span>
</label>
</div>
</div>
</div>
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @files="getFiles"></Modal>
</div>
</template>
<script>
export default {
props: ['type', 'position'],
data() {
return {
loading: false,
files: undefined,
dataFiles: [],
vtype: this.type || 'image',
showmodal: undefined,
docid: this.$id()
}
},
methods: {
doChange() {
this.dataFiles = []
let fileList = document.getElementById(this.docid).files
this.files = Array.from(fileList)
if(this.files.length===0) return
this.files.map(v=>{
let file = this.$upload(v, this.vtype, 1, '0') //this.$store.state.login.id
this.dataFiles.push(file)
})
this.showmodal = {component: 'media/UploadProgress', title: 'Upload files', width: '700px', height: '200px', vbind: {files: this.dataFiles}}
this.clearFileList()
},
clearFileList() {
const fileInput = document.getElementById(this.docid);
const dt = new DataTransfer()
fileInput.files = dt.files
},
getFiles(files) {
this.$emit('files', files)
setTimeout(()=>this.showmodal=undefined, 3000)
}
}
}
</script>