How would I go about sending a file message with multiple images?

Lets say we have the standard “FileMessage” displayed like this in our cha, for this we use the “file.url” parameter. If I only wanted to send one message but attach multiple images. Is there a specific way of doing this? Or would I just attach the additional images to “data”?

image

Imagine this card, but with maybe 2-3 additional images inside, kind of like facebook messenger.

We’re just using the Sendbird JS SDK + VueJS, not the React UI kit for clarity

Thanks,
Sam

You can send one file message.
What you can do is to send URLs and parse the message to display your images.

and what about the local file choosing from library?
as far as i know that, send bird will not response the uploaded images if you upload with urls file

You would simply select multiple items from the library you’re using to select the files. For example, if you were using the built in browser method, you’d select shift ctrl/cmd click multiple items.

Can you expand on what you mean by Sendbird not responding if you send multiple URLs?

1 Like

could you share the doc guide for javascript ? i would be very appreciated

We don’t provide documentation on how to grab files from your device. We do provide documentation on how to send those files once you’ve selected them:

Additionally, you can take a look at any of our sample applications to see how we may be implementing it in those: GitHub - sendbird/SendBird-JavaScript: A guide of the installation and functions of Sendbird Chat, UIKit, and SyncManager for JavaScript samples.

1 Like

You can send multiple file messages via

Please refer to our API reference
https://sendbird.github.io/core-sdk-javascript/module-model_baseChannel-BaseChannel.html#sendFileMessage

2 Likes

i will try again thanks @Tyler

thank you @Miyoung_Han

Hello there, when I call sendFileMessages() it’s doens’t respond anything

This should work. You need to send multiple sb.FileMessageParams()

Start with your input box accepting multiple files. Something like:

<input type="file" id="filesEle" multiple />

Then, in your Javascript code:

const files = document.getElementById('filesEle').files;

To get the array of files. Then create as many FileMessageParams() as files selected:

// You need to send this array
const arrayParams = [];
// Check all the selected files
for (let file of files) {
  const params = new sb.FileMessageParams();
  params.file = file;
  params.fileName = file.name;
  params.fileSize = file.size;
  params.mimeType = file.type;
  // Add to the array
  arrayParams.push(params);
} 
// Send your message
channelObj.sendFileMessages(arrayParams, (fileMessage, error) => {
  ...
});    

Please let us know how it goes :slight_smile:

1 Like

yeah man, Sorry my bad, Function sendFileMessages doesn’t return call back, but when I refresh, still got uploaded image

Can you share with us your entire function for sending a file message? It should definitely return a callback.


Here my code. but sendFileMessages , doesn’t return a callback, but still get images when reload app.
2) Why sendFileMessages =>but don’t return fileImage array instead of file ?

the params.file = source. that is correct or incorrect ? thank you

If “source” is the type File, then yes, it’s correct.

I just make let source = {
uri: image.path,
name: multipleFile + ${currentdate.getMilliseconds()},
type: “image/jpg”,
}
then params.file = source;

Hi rodirguez pls help me to respond soon :((

I check, the response and see that “sendingStatus”: “pending”, “silent”: false,