fix: Check uploaded file size in widget and dashboard (#1975)

* File size check logic in widget

* set maxium file size

* update locale texts

* file size check in dashboard

* dynamincally set file size limit error message

* code climate review fixes

* add alert mixin

* move attahcment bus event to constants

* Move file size check logic to helper

* add specs for file size limit check helper

* changes as per review
This commit is contained in:
Muhsin Keloth 2021-04-15 22:28:19 +05:30 committed by GitHub
parent 45e43b0b89
commit ce4ce3c86c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 143 additions and 56 deletions

View file

@ -11,9 +11,7 @@
class="image-thumb"
:src="attachment.thumb"
/>
<span v-else class="attachment-thumb">
📄
</span>
<span v-else class="attachment-thumb"> 📄 </span>
</div>
<div class="file-name-wrap">
<span class="item">
@ -37,8 +35,7 @@
</div>
</template>
<script>
import { formatBytes } from 'dashboard/helper/files';
import { formatBytes } from 'shared/helpers/FileHelper';
export default {
props: {
attachments: {

View file

@ -72,6 +72,7 @@
<script>
import { mapGetters } from 'vuex';
import { mixin as clickaway } from 'vue-clickaway';
import alertMixin from 'shared/mixins/alertMixin';
import EmojiInput from 'shared/components/emoji/EmojiInput';
import CannedResponse from './CannedResponse';
@ -81,6 +82,9 @@ import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel
import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel';
import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
import {
isEscape,
isEnter,
@ -100,7 +104,7 @@ export default {
ReplyBottomPanel,
WootMessageEditor,
},
mixins: [clickaway, inboxMixin, uiSettingsMixin],
mixins: [clickaway, inboxMixin, uiSettingsMixin, alertMixin],
props: {
inReplyTo: {
type: [String, Number],
@ -351,21 +355,28 @@ export default {
}
},
onFileUpload(file) {
this.attachedFiles = [];
if (!file) {
return;
}
const reader = new FileReader();
reader.readAsDataURL(file.file);
reader.onloadend = () => {
this.attachedFiles.push({
currentChatId: this.currentChat.id,
resource: file,
isPrivate: this.isPrivate,
thumb: reader.result,
});
};
if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
this.attachedFiles = [];
const reader = new FileReader();
reader.readAsDataURL(file.file);
reader.onloadend = () => {
this.attachedFiles.push({
currentChatId: this.currentChat.id,
resource: file,
isPrivate: this.isPrivate,
thumb: reader.result,
});
};
} else {
this.showAlert(
this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
MAXIMUM_FILE_UPLOAD_SIZE,
})
);
}
},
removeAttachment(itemIndex) {
this.attachedFiles = this.attachedFiles.filter(