Send File issue

Hello

I’m facing problem once I will send file, below is my code:
If I will pass wrong data the getting error but once pass correct data then not able to get success.

Same code is working with my demo app.

const data = ‘’;
const customType = ‘’;
const thumbSizeList = [ { maxWidth: 160, maxHeight: 160 } ];
const startTime = Date.now() / 1000;
const clearIntervalId = setInterval(() => {
const curTime = Date.now() / 500;
if (curTime - startTime > 1 * 60 * 60) {
clearInterval(clearIntervalId);
}
if (SendBird.getInstance() && SendBird.getInstance().getConnectionState() === ‘OPEN’) {
clearInterval(clearIntervalId);
channel.sendFileMessage(file, data, customType, thumbSizeList, (message, error) => {
callback(message, error);
});
}
}, 500);

Sorry but are you referring to this documentation for sending file messages?

Because parameters for your message should go like:

// Let's say you have a <input type="file" id="attachFile" />
const files = document.getElementById('attachFile').files;
const file = files[0];
console.dir(file);

// Sending a file message with a raw file
const params = new sb.FileMessageParams();

params.file = file;             // Or .fileUrl  = FILE_URL (You can also send a file message with a file URL.)
params.fileName = file.name;
params.fileSize = file.size;
params.thumbnailSizes = [{maxWidth: 100, maxHeight: 100}, {maxWidth: 200, maxHeight: 200}]; 
params.mimeType = file.type;
params.mentionType = 'users';                       // Either 'users' or 'channel'
params.pushNotificationDeliveryOption = 'default';  // Either 'default' or 'suppress'
// CustomType, Data, etc. You can include all of them into 'params'

groupChannel.sendFileMessage(params, function(fileMessage, error) {
    if (error) {
        alert(error);
    } else {
        console.log(fileMessage);
        alert('Success!');
    }
});

Yes, and I have anothe demo with same code and it’s working fine with it.

Any one can help me?

Instead of this:

Can you try this:

groupChannel.sendFileMessage(params, function(fileMessage, error) {
    if (error) {
        // Handle error.
    }
    ...
});

As you can see here:

I already a tried with the same way you suggested.
I’m passing
file = {
uri: ‘content://media/external/images/media/531’,
name: ‘IMG_1581070571244.jpg’,
type: ‘image/jpeg’
}

The data I’m passing with file is correct?

I mean not the content of the file variable but the parameters for the .sendFileMessage function…

Yes, I’m passing all params but just want to know the file I’m passing with param is correct way?

If I will pass wrong data then got error but not able to trigger callback once pass correct data.

For Javascript use a valid FILE object.

  interface FileMessageParams {
    new(): FileMessageParams;
    file: File;
    fileUrl: string;
    fileName: string;
    fileSize: number;
    mimeType: string;
    data: string;
    customType: string;
    thumbnailSizes: Array<ThumbnailSize>;
    mentionType: 'users' | 'channel';
    mentionedUserIds: Array<string>;
    mentionedUsers: Array<User>;
    metaArrays: Array<MessageMetaArray>;
    metaArrayKeys: Array<string>; // DEPRECATED
    pushNotificationDeliveryOption: 'default' | 'suppress';
    parentMessageId: number;
  }

Something like:

    const files = document.getElementById('attachFile').files;
    const file = files[0]; // Grab the first (this is a demo only. Need to validate not null and index)
    console.dir(file)

Thanks for your quick reply.
If I will pass wrong data in file then got the error so I think I’m passing correct way for pass file and I have used below package for get image using React Native.

This tool returns a BASE64 string of the image (large files may take more time to process)

This will work:

const url = 'data:image/png;base64,... '; // Replace the ... with your BASE64 response text. 
fetch(url)
  .then(res => res.blob())
  .then(blob => {
  
    // This is your File object
    const file = new File([blob], "anyfilenamehere.png",{ type: "image/png" })
    console.dir(file);

    // Send to Sendbird    
    const formData = new FormData()
    formData.append('file', file);
    formData.append('message_type', 'FILE');
    formData.append('user_id', 'test1'); // Replace with a user id of yours

    const headers = new Headers({
        'Api-token': 'WRITE YOUR API TOKEN HERE'      
    });
    const req = new Request('https://api-YOUR-APP-ID-HERE.sendbird.com/v3/group_channels/ANY-CHANNEL-URL-OF-YOURS/messages', {
      method: 'POST',
      headers: h,
      body: formData      
    })
    fetch(req)
    .then(response => response.json())
    .then(data => {
      console.log(data); // Message uplodaded!
    })
    .catch(error => {
      console.error(error)
    })
})

If this tool (react-native-image-picker) results the BLOB, then you can save the time to convert and just use:

const file = new File([blobFromReact-Native-Image-Picker], 
    "anyfilenamehere.png", { type: "image/png" });

What is mean of test-channel here?

Sorry replace that for any Group Channel url of yours.

Thanks a lot but I’m getting error like

{“data”: {“message”: “Server Error. Please try again later.”}}

Can you please post (some) your code (hide if you need to any private information) here? Maybe I can see anything there…

I have fixed this error:
{“data”: {“message”: “Server Error. Please try again later.”}}

But I’m not able to get channel list with below code:

Here simply I’m trying to get channel list.

const headers = new Headers({
‘Api-token’: ‘MY KEY’
});

const req = new Request(
	'https://api-9DA1B1F4-0BE6-4DA8-82C5-2E81DAB56F23.sendbird.com/v3/group_channels',
	{
		method: 'GET',
		headers: headers
	}
);

await fetch(req)
	.then((response) => console.log('FINALLLA-----------'+JSON.stringify(response)))
	.then((data) => {
		console.log('FINALLLA1111-----------'+JSON.stringify(data));
		console.log(data); // Message uplodaded!
	})
	.catch((error) => {
		console.log('FINALLLA2222-----------');
		console.error(error);
	});

Try modifying here:

.then((response) => console.log('FINALLLA-----------'+JSON.stringify(response)))

Can you please try this one? It works for me:

const headers = new Headers({
    'Api-Token': '...'
});

const req = new Request(
	'https://api-YOUR-APP-ID-HERE.sendbird.com/v3/group_channels',
	{
		method: 'GET',
		headers: headers
	}
);

fetch(req)
  .then(response => response.json())
  .then(data => {
      console.log( JSON.stringify(data) );
  })
  .catch(error => {
    console.log('Error');
    console.error(error)
  })

Thanks for your reply. I will take a look