The most common topic about uploads especially when you want to use stream's CDN.
Stream had imgix CDN before but now its cloudfront, so if you have issues with your CDN URL, please feel free to reach out to https://getstream.io/contact/support/
Coming to uploading images here are the steps to follow -
Client-side
Say you have a file helloworld.png and you want it to upload to getStream CDN -
const promises = [
channel.sendImage(
fs.createReadStream('./helloworld.png'),
'hello_world.png',
),
];
const results = await Promise.all(promises);
const attachments=results.map(response=>{
return{
type:'image',
thumb_url:response.file,
asset_url:response.file
};
});
await channel.sendMessage({
text:'Check what I have uploaded in parallel',
attachments: [{
type:attachments.type,
thumb_url:attachments[0].thumb_url,
asset_url:attachments[0].asset_url
}]
});
From the Server-side
The only difference is, you would include user-id in these 2 -
const promises = [
channel.sendImage(
fs.createReadStream('./helloworld.png'),
'helloworld.png',
'image/png',
{
id: 'Seetha'
}
),
];
await channel.sendMessage({
text:'Check what I have uploaded in parallel',
attachments: [{
type:attachments.type,
thumb_url:attachments[0].thumb_url,
asset_url:attachments[0].asset_url
}],
user_id: 'Seetha'
});
Say, you have a base64 image - here are the steps to send base64 image -
Client-side-
const buffer = Buffer.from(yourBase64Data, 'base64');
function bufferToStream(buffer) {
let tmp=newDuplex();
tmp.push(buffer);
tmp.push(null);
returntmp;
}
const myReadableStream = bufferToStream(buffer);
const promises = [
channel.sendImage(
myReadableStream,
'image/png',
'happy.png'
)];
const results = await Promise.all(promises);
const attachments=results.map(response=>{
return{
type:'image',
thumb_url:response.file,
asset_url:response.file
};
});
await channel.sendMessage({
text:'Check what I have uploaded in parallel',
attachments: [{
type:attachments.type,
thumb_url:attachments[0].thumb_url,
asset_url:attachments[0].asset_url
}]
});
Server-side -
const buffer = Buffer.from(yourBase64Data, 'base64');
function bufferToStream(buffer) {
let tmp=newDuplex();
tmp.push(buffer);
tmp.push(null);
returntmp;
}
const myReadableStream = bufferToStream(buffer);
const promises = [
channel.sendImage(
myReadableStream,
'happy.png',
'image/png',
{id:'Seetha'}
)];
const results = await Promise.all(promises);
const attachments=results.map(response=>{
return{
type:'image',
thumb_url:response.file,
asset_url:response.file
};
});
// You can update the user profile image using the base64 image like this -
await client.upsertUsers([{
id:'101',
role:'user',
username:'101',
name:'101',
image:attachments[0].thumb_url
}]);
await channel.sendMessage({
text:'Check what I have uploaded in parallel',
attachments: [{
type:attachments.type,
thumb_url:attachments[0].thumb_url,
asset_url:attachments[0].asset_url
}],
user_id: 'Seetha'
});
Comments
0 comments
Please sign in to leave a comment.