File Uploads New

LAST EDIT Apr 08 2021

The channel.sendImage and channel.sendFile methods make it easy to upload files.

This functionality defaults to using the Stream CDN. If you would like, you can easily change the logic to upload to your own CDN of choice.
The maximum file size is 20MB for the Stream Chat CDN.

Uploading files

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const promises = [ 
    channel.sendImage( 
        fs.createReadStream('./helloworld.jpg'), 
        'hello_world1.jpg', 
    ), 
    channel.sendImage( 
        fs.createReadStream('./helloworld.jpg'), 
        'hello_world2.jpg', 
    ), 
]; 
 
const results = await Promise.all(promises); 
 
const attachments = results.map(response => { 
    return { 
        type: 'image', 
        thumb_url: response.file, 
        asset_url: response.file, 
    }; 
}); 
 
const response = await channel.sendMessage({ 
    text: 'Check out what I have uploaded in parallel', 
    attachments, 
}); 
 
expect(response.message.attachments).to.equal(attachments);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
File imageFile = new File("path"); 
File anyOtherFile = new File("path"); 
 
channelController.sendImage(imageFile, new ProgressCallback() { 
    @Override 
    public void onSuccess(@NotNull String file) { 
 
    } 
 
    @Override 
    public void onError(@NotNull ChatError error) { 
 
    } 
 
    @Override 
    public void onProgress(long progress) { 
 
    } 
}); 
 
channelController.sendFile(anyOtherFile, new ProgressCallback() { 
    @Override 
    public void onSuccess(@NotNull String file) { 
 
    } 
 
    @Override 
    public void onError(@NotNull ChatError error) { 
 
    } 
 
    @Override 
    public void onProgress(long progress) { 
 
    } 
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
let channel = Client.shared.channel(type: .messaging, id: "general") 
// Upload UIImage. 
let image = UIImage(systemName: "circle")! 
if let imageData = image.jpegData(compressionQuality: 0.9) { 
    channel.sendImage(fileName: "Circle", 
                      mimeType: AttachmentFileType.jpeg.mimeType, // or you can pass your own mimeType as string 
                      imageData: imageData, 
                      { (progress) in 
                          // handle progress, eg update progressBar 
                      }, { (result) in 
                          // handle result 
                      }) 
} 
// Upload a local file with URL. 
let url = Bundle.main.url(forResource: "calculations", withExtension: "pdf")! 
if let fileData = try? Data(contentsOf: url) { 
    channel.sendFile(fileName: "Calculations", 
                     mimeType: AttachmentFileType.generic.mimeType, // or your own mimeType as string 
                     fileData: fileData, 
                     { (progress) in 
                        // handle progress, eg update progressBar 
                     }, { (result) in 
                        // handle result 
                     }) 
} 
 
// Keep in mind that these functions will not make the attachments appear as visible in the channels. 
// The attachment will be uploaded but will be invisible. To show it, you need to attach it 
// to a message and send the message. 
/* 
Here are the steps to send an attachment to a channel: 
1. As shown here, upload the image data using `channel.sendImage` (or channel.sendFile) and get the resulting URL. 
2. Create the Attachment data as follows: 
``` 
// for images 
let attachment = Attachment(type: .image, title: "<#Your file name here#>, imageURL: <#The URL you get from sendImage#>) 
// for files 
let attachment = Attachment(type: .file, title: "<#Your file name here#>, url: <#The URL you get from sendFile#> 
``` 
3. Create the Message object with this attachment: 
``` 
let message = Message(text: "<#Message Body here#>", attachments: [attachment]) 
``` 
4. Send the message: 
``` 
channel.send(message: message) 
``` 
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
val imageFile = File("path") 
val anyOtherFile = File("path") 
 
// upload an image 
channelController.sendImage(imageFile, object: ProgressCallback{ 
    override fun onSuccess(file: String) { 
 
    } 
 
    override fun onError(error: ChatError) { 
 
    } 
 
    override fun onProgress(progress: Long) { 
 
    } 
 
}) 
 
// upload a file 
channelController.sendFile(anyOtherFile, object: ProgressCallback{ 
    override fun onSuccess(file: String) { 
 
    } 
 
    override fun onError(error: ChatError) { 
 
    } 
 
    override fun onProgress(progress: Long) { 
 
    } 
 
})
1
2
3
$user = [ 'id' => 'jenny' ]; 
 
$response = $channel->sendImage('http://bit.ly/2O35mws', 'image.jpeg', $user);

In the code example above, note how the message attachments are created after the files are uploaded. The React components support regular uploads, clipboard pasting, drag-and-drop, as well as URL enrichment via built-in open-graph scraping.

The sendImage and sendFile methods return a URL that points to your file on the Stream CDN. If your file is an image, it will be served inline with HTTP requests, or as an attachment otherwise.

Individual uploads will count against your stored files quota. Retrieving a file from the Stream CDN will count against your monthly files bandwidth quota. You can get more info on our pricing page.
Copied!

The Stream CDN URL returned during the upload contains a signature that validates the access to the file it points to. Only the members of a channel a file was uploaded to can see the attachment and its unique, signed link. Links can only be accessed with a valid signature, which also protects against enumeration attacks.

Whenever messages containing your attachments are retrieved (i.e., when querying a channel), the attachment links will contain a new, fresh signature.

A single Stream CDN URL expires after 14 days, after which its signature will stop working and the link won't be valid anymore. You can check when a link will expire by comparing the current time with the Unix timestamp in the Expires parameter of the link's query:

https://us-east.stream-io-cdn.com/0000/images/foo.png?...&Expires=1602666347&...

As explained above, all operations that return messages will refresh links automatically, but if you are storing a message containing an expired link you can perform a getMessage call to retrieve fresh links for its attachments.

Image resizing

Copied!

You can automatically resize an image appending query parameters to a valid image link stored on the Stream CDN.

There are four supported params - all of them are optional and can be used interchangeably:

Parameter

type

values

description

w

number

Desired width

h

number

Desired height

resize

string

clip | crop | scale | fill

The resizing mode

crop

string

center | top | bottom | left | right

The cropping direction during resize

Resized images will count against your stored files quota.