Developers

Upload File

Introduction

The Chat does not allow to upload files to its own system, but using the Chat SDK adapters you can let a user upload a file and store it in your own system for later purposes.

Requirements

Before implementing the adapter, consider that you need:

  • A variable within an Information Request and Transaction data field that requests for the file.
  • A system where you can store the file.

How it works

Imagine that a variable called file is responsible for activating the upload media functionality in the Chat SDK.

chatbot.subscriptions.onDisplayChatbotMessage((messageData, next) => {
    if (messageData && "actionField" in messageData && "variableName" in messageData.actionField) {
        if (messageData.actionField.variableName === "file") {
            chatbot.actions.showUploadMediaButton();
        }
    }
    next(messageData);
});

We would display the upload media button in the Chat SDK when:

  • The Chat displays an answer, using the onDisplayChatbotMessage subscription.
  • The answer is part of a transaction where it requests for information (there is an actionField).
  • The requested variable name is file.

action_field

After displaying the button to upload media, we would have to detect when the user uploads a file using the onUploadMedia subscription.

let fileId;
chatbot.subscriptions.onUploadMedia((mediaData, next) => {
    chatbot.actions.hideUploadMediaButton();
    chatbot.actions.sendMessage({ message: mediaData.file.name });
    uploadFile(mediaData.file).then(response => {
        fileId = response;
    });
});

Finally, when the file gets uploaded:

  • The button to upload media is hidden again.
  • A message is sent to the Chat to indicate that the user has attached a file.
  • An uploadFile method is called. This method uploads the file to an external system and returns the file ID which can be used later to fetch it or send it along other data. This part can be implemented according to your necessities.

upload_media