66 lines
1.7 KiB
Vue
Executable file
66 lines
1.7 KiB
Vue
Executable file
<template>
|
|
<file-upload accept="image/*" @input-file="onFileUpload">
|
|
<span class="attachment-button ">
|
|
<i v-if="!isUploading.image"></i>
|
|
<spinner v-if="isUploading" size="small" />
|
|
</span>
|
|
</file-upload>
|
|
</template>
|
|
|
|
<script>
|
|
import FileUpload from 'vue-upload-component';
|
|
import Spinner from 'shared/components/Spinner.vue';
|
|
|
|
export default {
|
|
components: { FileUpload, Spinner },
|
|
props: {
|
|
onAttach: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
},
|
|
data() {
|
|
return { isUploading: false };
|
|
},
|
|
methods: {
|
|
async onFileUpload(file) {
|
|
this.isUploading = true;
|
|
try {
|
|
const thumbUrl = window.URL.createObjectURL(file.file);
|
|
await this.onAttach({
|
|
file_type: file.type,
|
|
file: file.file,
|
|
thumbUrl,
|
|
});
|
|
} catch (error) {
|
|
// Error
|
|
}
|
|
this.isUploading = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import '~widget/assets/scss/variables.scss';
|
|
|
|
.attachment-button {
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding-right: $space-smaller;
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
i {
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
background: white center center no-repeat;
|
|
background-size: contain;
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23999a9b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-paperclip'%3E%3Cpath d='M21 11l-9 9a6 6 0 01-8-8l9-9a4 4 0 016 5L9 17a2 2 0 01-2-2l8-9' /%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
</style>
|