6fe5484119
- Allowing the ability to upload more common file types like zip, Docx etc - Fallback for image bubble when the image URL isn't available fixes: #3270 Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
74 lines
1.9 KiB
Vue
Executable file
74 lines
1.9 KiB
Vue
Executable file
<template>
|
|
<file-upload
|
|
:size="4096 * 2048"
|
|
:accept="allowedFileTypes"
|
|
@input-file="onFileUpload"
|
|
>
|
|
<button class="icon-button flex items-center justify-center">
|
|
<fluent-icon v-if="!isUploading.image" icon="attach" />
|
|
<spinner v-if="isUploading" size="small" />
|
|
</button>
|
|
</file-upload>
|
|
</template>
|
|
|
|
<script>
|
|
import FileUpload from 'vue-upload-component';
|
|
import Spinner from 'shared/components/Spinner.vue';
|
|
import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
|
|
import {
|
|
MAXIMUM_FILE_UPLOAD_SIZE,
|
|
ALLOWED_FILE_TYPES,
|
|
} from 'shared/constants/messages';
|
|
import { BUS_EVENTS } from 'shared/constants/busEvents';
|
|
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
|
export default {
|
|
components: { FluentIcon, FileUpload, Spinner },
|
|
props: {
|
|
onAttach: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
},
|
|
data() {
|
|
return { isUploading: false };
|
|
},
|
|
computed: {
|
|
fileUploadSizeLimit() {
|
|
return MAXIMUM_FILE_UPLOAD_SIZE;
|
|
},
|
|
allowedFileTypes() {
|
|
return ALLOWED_FILE_TYPES;
|
|
},
|
|
},
|
|
methods: {
|
|
getFileType(fileType) {
|
|
return fileType.includes('image') ? 'image' : 'file';
|
|
},
|
|
async onFileUpload(file) {
|
|
if (!file) {
|
|
return;
|
|
}
|
|
this.isUploading = true;
|
|
try {
|
|
if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
|
|
const thumbUrl = window.URL.createObjectURL(file.file);
|
|
await this.onAttach({
|
|
fileType: this.getFileType(file.type),
|
|
file: file.file,
|
|
thumbUrl,
|
|
});
|
|
} else {
|
|
window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
|
|
message: this.$t('FILE_SIZE_LIMIT', {
|
|
MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
|
|
}),
|
|
});
|
|
}
|
|
} catch (error) {
|
|
// Error
|
|
}
|
|
this.isUploading = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|