CODEWITHSUNDEEP
javascriptvue.jssendbird
dlkhjs
dlkhjs

Reputation: 23

Using Vue and Javascript to upload file image for chat application

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.

Upvotes: 0

Views: 813

Answers (1)

Tyler Hammer
Tyler Hammer

Reputation: 86

Disclaimer: I am a Sendbird Employee

There is a bit of lacking information here that makes this a bit difficult to solve but I'll try to do my best with what you've provided.

Typically, when we see this type of issue its due to the data that is being passed to params.file. However since you've not included any information about any errors being returned I can only make an assumption.

I'm not inherently familiar with Vue but I put together a quick example on CodeSandbox where you can upload a file to a channel. Simply update the following variables: APP_ID, USER_ID, CHANNEL_URL.

Example link: https://codesandbox.io/s/rough-vue-sendbird-example-8rmher

If you have follow up questions, I'd suggest heading over to the Sendbird Community where we have a wider team that can try to assist.

Upvotes: 0

Related Questions