127 lines
3.6 KiB
Vue
127 lines
3.6 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 is-primary px-1">
|
|
<span class="icon-text is-clickable">
|
|
<SvgIcon
|
|
v-bind="{ name: 'attach-file.svg', type: 'white', size: 22 }"
|
|
></SvgIcon>
|
|
</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", "convert", "quality"],
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
files: undefined,
|
|
dataFiles: [],
|
|
vtype: this.type || ["image"],
|
|
showmodal: undefined,
|
|
docid: this.$id(),
|
|
};
|
|
},
|
|
methods: {
|
|
getFileExtension(fileName) {
|
|
if (!fileName || typeof fileName !== "string") return "";
|
|
const parts = fileName.split(".");
|
|
return parts.length > 1 ? parts.pop().toLowerCase() : "";
|
|
},
|
|
getType(ext) {
|
|
// copied from 01-common.js
|
|
const imageFormat = ["png", "jpg", "jpeg", "bmp", "gif", "svg", "webp"];
|
|
const videoFormat = ["wmv", "avi", "mp4", "flv", "mov", "mpg", "amv", "rm"];
|
|
|
|
if (ext === 'pdf') return 'pdf';
|
|
if (imageFormat.includes(ext)) return 'image';
|
|
if (videoFormat.includes(ext)) return 'video';
|
|
return 'file';
|
|
},
|
|
doChange() {
|
|
this.dataFiles = [];
|
|
const fileList = document.getElementById(this.docid).files;
|
|
this.files = Array.from(fileList);
|
|
if (this.files.length === 0) return;
|
|
|
|
// Xác định giá trị convert: "1" nếu convert được bật, "0" nếu không
|
|
const convertValue = this.convert ? "1" : "0";
|
|
const qualityValue = this.convert && this.quality ? this.quality : null;
|
|
|
|
this.files.map((v) => {
|
|
const ext = this.getFileExtension(v.name);
|
|
const type = this.getType(ext);
|
|
|
|
if (!this.vtype.includes(type)) {
|
|
this.$snackbar(`Định dạng file "${ext}" không hợp lệ`);
|
|
return;
|
|
}
|
|
|
|
let file = this.$upload(v, type, 1, convertValue, qualityValue);
|
|
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>
|