File Upload feature

Chatbot file upload:

Customers can upload two type of files , images and PDF

Once customer uploads a file, new_message socket event is triggered in back-end where we receive the data sent by front-end in data object

data = {
    type,
    fileBase64,
    pages,
    fileName,
    fileSize,
    fileType
}

• type : data type of upload message,'text' in case of text message, in our case this is 'uploadedDocument'
• fileBase64 : base64 encoded file contents
• pages : number of pages in file, only in the case of PDF,in case of image we don't get any key of this name
• fileName : name of file
• fileSize : size of file in bytes
• fileType : Multipurpose Internet Mail Extensions or MIME type of file, like 'image/png' 'application/pdf' etc

We start with an if condition to see the type of message.

If it's 'uploadedDocument' then we proceed to file-upload-logic else the respective blocks are executed depending of 'type'

• We convert the base64 data into buffer

• Get file type and mime type from the buffer, let's reference the file type calculated at back-end as fileType-backend, in this doc, to not confuse it with one sent by front-end

• Depending on the fileType-backend we call the respective function to validate the contents

• if fileType-backend is 'image' or 'pdf' we call the respective function else we say the contents are invalid by default

• If the contents are invalid

  • we change the data.type to text, and and assign data.text as 'NOT USER TEXT ---- File uploaded is invalid/not allowed', so that this modified message reaches agent and he gets to know that customer tried to upload a file but was unable to do so
  • Let Front-end know that contents are invalid via a callback function

if contents are valid then

• We upload the file Buffer to s3 Note:- we can explicitly configure s3 to generate a URL that upon clicking downloads the file(emulating the 'save as' behavior) or open the file in new or same tab ( inline ) So,in case of image we generate inline links, and in case of PDF we generate attachment links( downloading links)

• After receiving the URL( inline or attachment) we define the payload to be saved in database as

  payload = {
         pages,
         fileName,
         fileType, 
         fileSize,
         fileUrl // URL generated by s3 
         }

  all the above values are sent by Front-end, except for fileUrl, so we save them as received, without modification.

• Now we add this payload object to data object , as this will be used in update_chatlogs function

We handle the control to processCustomerMessage with modified data object and let Front-end know of the success of process via callback

Now, in the update_chatlogs we check that if sender is customer and data.type is 'uploadedDocument' then we save the payload object in database

For more information about structure of payload , Click here

Dashboard file upload

Most of the flow from Dashboard is same as chatbot with few difference as:

• In Dashboard if file contents are invalid , a callback has not been implemented yet so if agent uploads an invalid file customer receives an empty message

• Before saving the chat_log to db , or before calling update_chatlogs , a template for chat_log document is generated so we change two values in this template in our case

  • type , which we set equivalent to 'uploadedDocument'
  • payload , which we set equivalent to generated payload, generated in a similar fashion as done in chatbot.