Working with Attachments

This topic explains how to work with attachments for Chat and Cases in Amazon Connect. For Chat Attachments, refer to the first section on the Amazon Connect Participant Service API. For Case Attachments, refer to the second section on the Amazon Connect service’s Attached Files APIs.

Uploading Attachments with the Participant Service

There are three basic steps for uploading a file using the Amazon Connect Participant Service API.

Below is a basic JavaScript implementation for reference purposes.

//Define the html element for file using input tag

<input type="file" id="fileUpload">
<input type="button" id="btnUploadFile" onclick="uploadFile()" value="Upload file">


async function uploadFile() {
    //Initiate the file upload by calling StartAttachmentUpload, providing the name, size, and content type of the file you want to upload.
    //The response will include a pre-signed URL and headers to use when building the file upload request, as well as an AttachmentId.
    const files = document.getElementById('fileUpload').files;
    const file = files[0];

    const startUploadRequest = {
        AttachmentName: file.name,
        AttachmentSizeInBytes: file.size,
        ContentType: file.type
    };
    const { AttachmentId, UploadMetadata } = await startAttachmentUpload(startUploadRequest);

    //Send the file data to the pre-signed S3 URL.
    //The file is stored in a temporary location in the S3 bucket.

    await uploadFileToS3(file, UploadMetadata.Url, UploadMetadata.HeadersToInclude);

    //Finalize the file upload by calling CompleteAttachmentUpload, providing the AttachmentId.
    //This moves the file to the final Attachments S3 path configured for the connect instance.
    const completeUploadRequest = {
        AttachmentIds: [ AttachmentId ]
    };
    await completeAttachmentUpload(completeUploadRequest);
}

async function startAttachmentUpload(requestData){
    const response = await fetch(StartAttachmentUploadEndpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
            'X-Amz-Bearer': ConnectionToken,
        },
        body: JSON.stringify(requestData)
    });

    return response.data;
}

async function uploadFileToS3(file, signedUrl, headersToInclude) {
    return fetch(signedUrl, {
      method: 'PUT',
      headers: headersToInclude,
      body: file
    });
}

async function completeAttachmentUpload(requestData){
    return fetch(CompleteAttachmentUploadEndpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
            'X-Amz-Bearer': ConnectionToken,
        },
        body: JSON.stringify(requestData)
    });
}

For an example of a real world implementation, view the Amazon Connect ChatJS JavaScript client on GitHub.

Uploading Attached Files with the Connect Service

The same basic steps follow from the Participant service instructions, for usage with the Amazon Connect service’s attached file APIs.