Image and File Attachments for WebChat in Twilio Flex

Time to read: 1 minute

June 24, 2020
Written by
Patrick Kolencherry
Twilion

Image and File Attachments - Flex Blog - Canva

Want to see Twilio Flex in action? Check out our interactive demo.

Ready to start building your contact center? We're offering $5,000 worth of free Flex Hours to help you get started. Sign up and start building with Twilio Flex!

Sharing images and files during a chat interaction can help speed up support requests by providing additional context to agents and richer instructions and information to customers. That’s why we’re excited to announce that we have launched a pilot of chat attachments for Twilio Flex.

You can get started with chat attachments today by following two easy steps:

  1. Enable the pilot feature for flex-ui: Select 1.20.0 for flex-ui within the version management panel. Then enable “Image and File Sharing for WebChat” within the pre-release features panel. If you aren’t able to select 1.20.0, please make sure that you have unchecked “Update minor versions” within the version management panel.
  2. Enable the pilot feature for flex-webchat-ui: Upgrade your version of flex-webchat-ui to 2.5.0 and add the following snippet to your webchat configuration.

This Twilio Feature is currently available as a pilot release. Some features are not yet implemented and others may be changed before the product is declared as Generally Available. Pilot and beta products are not covered by a Twilio SLA.

Learn more about how Twilio supports products that are not yet GA.

Extending Chat Attachments

Like the rest of Twilio Flex, chat attachments are also programmable. For example, if you wanted to increase the max file size from the default of 10MiB to 50MiB and limit attachments to images only, you could do the following in a Flex plugin:

manager.updateConfig({
  fileAttachment: {
    // Max filesize in bytes
    maxFileSize: 50 * 1024 * 1024,
    // Array(string) of file extensions
    acceptedExtensions: ['jpeg', 'jpg', 'png', 'gif', 'webp', 'heic', 'avci']
  }
});

Chat attachments also expose a set of actions that you can invoke programmatically to automate common tasks and replace to modify existing behaviour. For example, you can use the Actions framework and the clipboard API to allow agents and customers to paste images from their clipboard by doing the following:

class PasteFileComponent extends React.Component {
  constructor(props){
    super(props);
    this.processPaste = this.processPaste.bind(this);
  }

  processPaste(pasteEvent){
    // We want to ignore paste events that do not have a file with them
    if(!pasteEvent.clipboardData || !pasteEvent.clipboardData.files[0])
      return;

    // Pull a raw file from our pasteEvent 
    const fileBlob = pasteEvent.clipboardData.items[0].getAsFile();

    Flex.Actions.invokeAction('AttachFile', {
      file: fileBlob,
      channelSid: this.props.channelSid
    });
  }

  // Attach our global listener for the paste event when the component mounts
  componentDidMount(){
    window.addEventListener('paste', this.processPaste);
  }

  // Clean up our listener when the component unmounts
  componentWillUnmount(){
    window.removeEventListener('paste', this.processPaste);
  }

  // This isn't a presentational component!
  render(){
    return null;
  }
}

Flex.MessageInput.Content.add(<PasteFileComponent key="PasteFileComponent" />);

We’re excited to see what you implement with the pilot of file attachments. We can’t wait to see what you build!

Want to see Twilio Flex in action? Check out our interactive demo.

Ready to start building your contact center? We're offering $5,000 worth of free Flex Hours to help you get started. Sign up and start building with Twilio Flex!

Related Posts

Related Resources

A newspaper article

Twilio Docs

From APIs to SDKs to sample apps

API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
An Open book

Resource Center

The latest ebooks, industry reports, and webinars

Learn from customer engagement experts to improve your own communication.
User group reactions

Ahoy

Twilio's developer community hub

Best practices, code samples, and inspiration to build communications and digital engagement experiences.