Currently I am using Sendbird to build a chat component and as Vue is not supported by Sendbird directly, I had to use modify the code to use it with Vue2.js. I am having hard time uploading image to chat and I was wondering if any of you can give some advice.
this is SendbirdAction.js file
sendFileMessage(
file,
) {
const fileMessageParams = this.sb.FileMessageParams();
fileMessageParams.file = file;
return new Promise((resolve, reject) => {
this.channel.sendFileMessage(fileMessageParams, (file, error) => {
error? reject(error) : resolve(file)
})
})
}
This is MessageInput.vue file where it supposed to handle file upload.
<template>
<div>
<!-- File Upload -->
<!-- Photo -->
<!-- Emoji -->
<textarea
placeholder="your message..."
v-model="message"
@keydown.enter.exact.prevent="sendMessage"
/>
<input
id ="files"
ref="files"
type="file"
multiple
@change= "handleFilesUpload"
/>
<button v-if="message" @click="handleFilesUpload">Send</button>
</div>
</template>
<script>
import { SendbirdAction } from '@/sendbird/SendbirdAction'
export default {
name: 'MessageInput',
data() {
return {
message: '',
}
},
methods: {
sendMessage: function (event) {
if (event.isComposing) {
return
}
SendbirdAction.getInstance()
.sendUserMessage(this.message)
.then((message) => {
this.$emit('addInputMessage', message)
this.message = ''
})
},
handleFilesUpload: function (event) {
const sendFile = event.target.files[0]
console.log(event.target.files[0]);
SendbirdAction.getInstance()
.sendFileMessage(sendFile)
.then((message) => {
this.$emit('addInputFile', message)
this.message = sendFile
})
},
},
}
</script>
This is MessageLog.vue where it shows the message and file in chat format.
<template>
<div class="message-log">
<ul v-if="msg.itemList.length > 0">
<li
class="chat-item"
v-for="message in msg.itemList"
:key="message.messageId"
>
<p>{{ message.sender.nickname }}</p>
<div style="white-space: pre-wrap">{{ message.message }}</div>
<p>{{ convertDate(message.createdAt) }}</p>
</li>
</ul>
</div>
</template>
I can so far choose the file and it says the file name and date on console once I console.log(event.target.files[0]). Yet, I do not know how to upload it to the chat log. If anyone could help me, I would greatly appreciate it.
