KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Delayed deploy of direct uploads (#3966)

Browse source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Tejaswini Chile 2022-02-15 16:16:54 +05:30 committed by GitHub
parent 2591a04c0b
commit 94a473c9f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 90 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/builders/messages/message_builder.rb
View file

@ -29,10 +29,12 @@ class Messages::MessageBuilder
return if @attachments.blank?
@attachments.each do |uploaded_attachment|
@message.attachments.build(
attachment = @message.attachments.build(
account_id: @message.account_id,
file: uploaded_attachment
)
attachment.file_type = file_type(uploaded_attachment&.content_type) if uploaded_attachment.is_a?(ActionDispatch::Http::UploadedFile)
end
end

4
app/controllers/api/v1/widget/messages_controller.rb
View file

@ -29,10 +29,12 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
return if params[:message][:attachments].blank?
params[:message][:attachments].each do |uploaded_attachment|
@message.attachments.new(
attachment = @message.attachments.new(
account_id: @message.account_id,
file: uploaded_attachment
)
attachment.file_type = helpers.file_type(uploaded_attachment&.content_type) if uploaded_attachment.is_a?(ActionDispatch::Http::UploadedFile)
end
end

3
app/controllers/dashboard_controller.rb
View file

@ -25,7 +25,8 @@ class DashboardController < ActionController::Base
'API_CHANNEL_NAME',
'API_CHANNEL_THUMBNAIL',
'ANALYTICS_TOKEN',
'ANALYTICS_HOST'
'ANALYTICS_HOST',
'DIRECT_UPLOADS_ENABLED'
).merge(app_config)
end

2
app/controllers/widgets_controller.rb
View file

@ -10,7 +10,7 @@ class WidgetsController < ActionController::Base
private
def set_global_config
@global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
@global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED')
end
def set_web_widget

15
app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
View file

@ -7,7 +7,7 @@
>
<div class="thumb-wrap">
<img
v-if="isTypeImage(attachment.resource.content_type)"
v-if="isTypeImage(attachment.resource)"
class="image-thumb"
:src="attachment.thumb"
/>
@ -15,12 +15,12 @@
</div>
<div class="file-name-wrap">
<span class="item">
{{ attachment.resource.filename }}
{{ fileName(attachment.resource) }}
</span>
</div>
<div class="file-size-wrap">
<span class="item">
{{ formatFileSize(attachment.resource.byte_size) }}
{{ formatFileSize(attachment.resource) }}
</span>
</div>
<div class="remove-file-wrap">
@ -50,12 +50,17 @@ export default {
onRemoveAttachment(index) {
this.removeAttachment(index);
},
formatFileSize(size) {
formatFileSize(file) {
const size = file.byte_size || file.size;
return formatBytes(size, 0);
},
isTypeImage(type) {
isTypeImage(file) {
const type = file.content_type || file.type;
return type.includes('image');
},
fileName(file) {
return file.filename || file.name;
},
},
};
</script>

4
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
View file

@ -25,7 +25,7 @@
direct_upload_url: '/rails/active_storage/direct_uploads',
direct_upload: true,
}"
@input-file="onDirectFileUpload"
@input-file="onFileUpload"
>
<woot-button
v-if="showAttachButton"
@ -134,7 +134,7 @@ export default {
type: Boolean,
default: false,
},
onDirectFileUpload: {
onFileUpload: {
type: Function,
default: () => {},
},

51
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View file

@ -77,7 +77,7 @@
:mode="replyType"
:inbox="inbox"
:send-button-text="replyButtonLabel"
:on-direct-file-upload="onDirectFileUpload"
:on-file-upload="onFileUpload"
:show-file-upload="showFileUpload"
:toggle-emoji-picker="toggleEmojiPicker"
:show-emoji-picker="showEmojiPicker"
@ -179,6 +179,7 @@ export default {
currentChat: 'getSelectedChat',
messageSignature: 'getMessageSignature',
currentUser: 'getCurrentUser',
globalConfig: 'globalConfig/get',
}),
showRichContentEditor() {
@ -544,6 +545,13 @@ export default {
isPrivate,
});
},
onFileUpload(file) {
if (this.globalConfig.directUploadsEnabled) {
this.onDirectFileUpload(file);
} else {
this.onIndirectFileUpload(file);
}
},
onDirectFileUpload(file) {
if (!file) {
return;
@ -559,13 +567,7 @@ export default {
if (error) {
this.showAlert(error);
} else {
this.attachedFiles.push({
currentChatId: this.currentChat.id,
resource: blob,
isPrivate: this.isPrivate,
thumb: null,
blobSignedId: blob.signed_id,
});
this.attachFile({ file, blob });
}
});
} else {
@ -576,22 +578,12 @@ export default {
);
}
},
onFileUpload(file) {
onIndirectFileUpload(file) {
if (!file) {
return;
}
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,
});
};
this.attachFile({ file });
} else {
this.showAlert(
this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
@ -600,6 +592,19 @@ export default {
);
}
},
attachFile({ blob, file }) {
const reader = new FileReader();
reader.readAsDataURL(file.file);
reader.onloadend = () => {
this.attachedFiles.push({
currentChatId: this.currentChat.id,
resource: blob || file,
isPrivate: this.isPrivate,
thumb: reader.result,
blobSignedId: blob ? blob.signed_id : undefined,
});
};
},
removeAttachment(itemIndex) {
this.attachedFiles = this.attachedFiles.filter(
(item, index) => itemIndex !== index
@ -619,7 +624,11 @@ export default {
if (this.attachedFiles && this.attachedFiles.length) {
messagePayload.files = [];
this.attachedFiles.forEach(attachment => {
messagePayload.files.push(attachment.blobSignedId);
if (this.globalConfig.directUploadsEnabled) {
messagePayload.files.push(attachment.blobSignedId);
} else {
messagePayload.files.push(attachment.resource.file);
}
});
}

2
app/javascript/shared/store/globalConfig.js
View file

@ -5,6 +5,7 @@ const {
BRAND_NAME: brandName,
CHATWOOT_INBOX_TOKEN: chatwootInboxToken,
CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
DIRECT_UPLOADS_ENABLED: directUploadsEnabled,
DISPLAY_MANIFEST: displayManifest,
INSTALLATION_NAME: installationName,
LOGO_THUMBNAIL: logoThumbnail,
@ -21,6 +22,7 @@ const state = {
brandName,
chatwootInboxToken,
createNewAccountFromDashboard,
directUploadsEnabled: directUploadsEnabled === 'true',
displayManifest,
installationName,
logo,

7
app/javascript/widget/api/endPoints.js
View file

@ -41,7 +41,12 @@ const sendAttachment = ({ attachment }) => {
const { file } = attachment;
const formData = new FormData();
formData.append('message[attachments][]', file);
if (typeof file === 'string') {
formData.append('message[attachments][]', file);
} else {
formData.append('message[attachments][]', file, file.name);
}
formData.append('message[referer_url]', referrerURL);
formData.append('message[timestamp]', timestamp);
return {

30
app/javascript/widget/components/ChatAttachment.vue
View file

@ -2,8 +2,11 @@
<file-upload
:size="4096 * 2048"
:accept="allowedFileTypes"
:data="{ direct_upload_url: '', direct_upload: true }"
@input-file="onDirectFileUpload"
:data="{
direct_upload_url: '/rails/active_storage/direct_uploads',
direct_upload: true,
}"
@input-file="onFileUpload"
>
<button class="icon-button flex items-center justify-center">
<fluent-icon v-if="!isUploading.image" icon="attach" />
@ -23,6 +26,7 @@ import {
import { BUS_EVENTS } from 'shared/constants/busEvents';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import { DirectUpload } from 'activestorage';
import { mapGetters } from 'vuex';
export default {
components: { FluentIcon, FileUpload, Spinner },
@ -36,6 +40,7 @@ export default {
return { isUploading: false };
},
computed: {
...mapGetters({ globalConfig: 'globalConfig/get' }),
fileUploadSizeLimit() {
return MAXIMUM_FILE_UPLOAD_SIZE;
},
@ -47,6 +52,13 @@ export default {
getFileType(fileType) {
return fileType.includes('image') ? 'image' : 'file';
},
async onFileUpload(file) {
if (this.globalConfig.directUploadsEnabled) {
this.onDirectFileUpload(file);
} else {
this.onIndirectFileUpload(file);
}
},
async onDirectFileUpload(file) {
if (!file) {
return;
@ -68,8 +80,8 @@ export default {
});
} else {
this.onAttach({
fileType: blob.content_type,
file: blob.signed_id,
...this.getLocalFileAttributes(file),
});
}
});
@ -85,18 +97,16 @@ export default {
}
this.isUploading = false;
},
async onFileUpload(file) {
async onIndirectFileUpload(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,
...this.getLocalFileAttributes(file),
});
} else {
window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
@ -110,6 +120,12 @@ export default {
}
this.isUploading = false;
},
getLocalFileAttributes(file) {
return {
thumbUrl: window.URL.createObjectURL(file.file),
fileType: this.getFileType(file.type),
};
},
},
};
</script>

3
config/installation_config.yml
View file

@ -44,3 +44,6 @@
value:
- name: ANALYTICS_HOST
value:
- name: DIRECT_UPLOADS_ENABLED
value: false
locked: false

5
db/migrate/20220207124741_add_direct_uploads_to_installation_config.rb Normal file
View file

@ -0,0 +1,5 @@
class AddDirectUploadsToInstallationConfig < ActiveRecord::Migration[6.1]
def change
ConfigLoader.new.process
end
end