File Uploads

Last Edit: Mar 03 2020

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.

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);
                    

// upload an image
channel.sendImage(filePath, new UploadFileCallback() {
            @Override
            public void onSuccess(Object o) {
                
            }

            @Override
            public void onError(String errMsg, int errCode) {

            }

            @Override
            public void onProgress(Object o) {

            }
});

// upload a file
channel.sendFile(filePath new UploadFileCallback() {
            @Override
            public void onSuccess(Object o) {
                
            }

            @Override
            public void onError(String errMsg, int errCode) {

            }

            @Override
            public void onProgress(Object o) {

            }
});
                    

// Upload UIImage.
if let imageData = image.jpegData(compressionQuality: 0.9) {
    channel.sendImage(fileName: "my_photo", 
                      mimeType: AttachmentFileType.jpeg.mimeType,
                      imageData: imageData)
        .observeOn(MainScheduler.instance)
        .subscribe(
            onNext: { response in
                print(response.progress)
            },
            onCompleted: { 
                print("The image was uploaded")
            })
        .disposed(by: disposeBag)
}

// Upload a local file with URL.
if let fileData = try? Data(contentsOf: url) {
    channel.sendFile(fileName: "my_file", 
                      mimeType: AttachmentFileType.generic.mimeType // "application/octet-stream"
                      imageData: fileData)
        .observeOn(MainScheduler.instance)
        .subscribe(
            onNext: { response in
                print(response.progress)
            },
            onCompleted: { 
                print("The file was uploaded")
            })
        .disposed(by: disposeBag)
}
                    

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) {

    }

})
                    

$user = [ 'id' => 'jenny' ];

$response = $channel->sendImage('http://bit.ly/2O35mws', 'image.jpeg', $user);
                    

In the JS 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. As a bonus, the Stream CDN will automatically handle image resizing for you.