Skip to main content

Files

Properties used for sending files.

info

When any of these properties are used, dragAndDrop is enabled automatically.

images​

Creates a button that allows the user to upload images.
This property can be set with a boolean true or configured with a FilesServiceConfig object.

<deep-chat images="true"></deep-chat>

gifs​

Creates a button that allows the user to upload GIFs.
This property can be set with a boolean true or configured with a FilesServiceConfig object.

<deep-chat gifs="true"></deep-chat>

camera​

Creates a button that allows the user to capture images using a web camera.
This property can be set with a boolean true or configured with a CameraFilesServiceConfig object.

<deep-chat camera="true"></deep-chat>

audio​

Creates a button that allows the user to upload audio files.
This property can be set with a boolean true or configured with a FilesServiceConfig object.

<deep-chat audio="true"></deep-chat>

microphone​

Creates a button that allows the user to record audio files using the microphone.
This property can be set with a boolean true or configured with a MicrophoneFilesServiceConfig object.

<deep-chat microphone="true"></deep-chat>

mixedFiles​

Creates a button that allows the user to upload any kind of files.
This property can be set with a boolean true or configured with a FilesServiceConfig object.

<deep-chat mixedFiles="true"></deep-chat>

dragAndDrop​

Configuration for the drag and drop functionality. If any of the above properties are defined or you have defined a service in the directConnection property which allows file uploads - this will automatically be defaulted to true. Once the user drops a file, it will only be accepted if any of the above properties allow it via their default or custom acceptedFormats property's value. For example if ".png,.jpg" in images are the only file types allowed, a dropped .txt file will not be accepted.

Example​

<deep-chat dragAndDrop='{"backgroundColor": "#80ff704d", "border": "5px dashed #52c360"}'></deep-chat>

Types​

Types shared by files properties:

FilesServiceConfig​

Object used to configure the ability for the component to send files.
connect object is used to override the default service connection settings when sending a file.
files controls what files can be uploaded to the component.
button is used to customize the the button element that enables the files to be uploaded. 

<deep-chat
  audio='{
    "connect": {"url": "https://customapi.com/audio"},
    "files": {"acceptedFormats": ".mp3,.wav"},
    "button": {"position": "outside-left"}
  }'
></deep-chat>

FileAttachments​

  • Type: {
         maxNumberOfFiles?: number,
         acceptedFormats?: string,
         infoModal?: InfoModal
    }

  • Default: {
         acceptedFormats:
             for images: ".png,.jpg",
             for audio: ".4a,.mp3,.webm,.mp4,.mpga,.wav,.mpeg,.m4a",
             for gifs: ".gif"
    }

Used to configure what files the component can accept.
maxNumberOfFiles controls the maximum number of files that can be sent within one message.
acceptedFormats is used to define the accepted file formats. This is a string that uses the same syntax as the accept attributes in input elements. The dragAndDrop feature will also use this value to verify the dropped files.
infoModal is used to display noteworthy information when the user clicks the button to browse for a file. 

<deep-chat images='{"files": {"maxNumberOfFiles": 2, "acceptedFormats": ".jpg,.png"}}'></deep-chat>

InfoModal​

A modal that is triggered when a user clicks on a button to upload a file. It is useful for scenarios when a user needs some clarification of how their data will be handled or other noteworty information.
textMarkDown is a string that uses Markdown syntax to generate the modal content. Use this Playground to help customize your content.
openModalOnce controls whether the modal is opened when the user clicks a button once or every time.
containerStyle is used to augment the basic styling of the modal element.

<deep-chat
  images='{
    "files": {
      "infoModal": {
        "textMarkDown":
          "Please note our terms of service for sending files: [link](https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley).",
        "openModalOnce": true,
        "containerStyle": {"borderRadius": "5px"}
      }
    }
  }'
></deep-chat>

CameraFilesServiceConfig​

Configuration for capturing images using a web camera and handling the resultant files.
connect is used to override the default connection settings when sending image files.
files is used to configure the files that are captured by the camera.
button is used to customize the button element used for the camera.
modalContainerStyle is used to customize the modal used to display the camera. 

<deep-chat
  camera='{
    "connect": {"url": "https://customapi.com/image-from-camera"},
    "files": {"format": "png"},
    "button": {"position": "outside-left"},
    "modalContainerStyle": {"borderRadius": "5px"}
  }'
></deep-chat>

CameraFiles​

  • Type: {
         format?: "png" | "jpeg",
         dimensions?: {width?: number, height?: number}
         maxNumberOfFiles?: number,
         acceptedFormats?: string
    }

  • Default: {
         format: "png",
         acceptedFormats: "image/*"
    }

Configuration for the captured files by the camera.
format is the resultant format of the image file that is produced by capturing a photograph.
dimensions are used to set the pixel area of the photograph. Please note that this is largely controlled by the mediaDevice of the user's browser, so if the dimensions you have provided skew the photograph in a particular way they may be overriden.
maxNumberOfFiles is the limit to the number of images that can be captured for one message.
acceptedFormats is used to limit the allowed files that can be dropped via the dragAndDrop functionality as this feature will enable it automatically. It uses the same syntax as the accept attributes in input elements. If the configuration in images also uses the acceptedFormats property, it will override this one.

<deep-chat
  camera='{
    "files": {
      "format": "png",
      "dimensions": {"width": 450, "height": 600},
      "maxNumberOfFiles": 2,
      "acceptedFormats": ".jpg,.png"
    }
  }'
></deep-chat>

MicrophoneFilesServiceConfig​

Configuration for recording audio using a microphone and handling the resultant files.
connect is used to override the default connection settings when sending audio files.
files is used to configure the resultant files that are recorded by the microphone.
button is the styling used for the microphone button element. 

<deep-chat
  microphone='{
    "connect": {"url": "https://customapi.com/audio-from-microphone"},
    "files": {"format": "mp3"},
    "button": {"position": "outside-left"}
  }'
></deep-chat>

AudioRecordingFiles​

  • Type: {
         format?: AudioFormat,
         maxDurationSeconds?: number,
         maxNumberOfFiles?: number,
         acceptedFormats?: string
    }

  • Default: {
         format: "mp3",
         maxDurationSeconds: 5999,
         acceptedFormats: "audio/*"
    }

Configuration for the recorded microphone files.
format is the resultant audio file format.
maxDurationSeconds is the maximum length of time one audio file can be recorded.
maxNumberOfFiles is the limit to the number of files that can be recorded for one message.
acceptedFormats is used to limit the allowed files that can be dropped via the dragAndDrop functionality as this feature will enable it automatically. It uses the same syntax as the accept attributes in input elements. If the configuration in audio also uses the acceptedFormats property, it will override this one.

<deep-chat
  microphone='{
    "files": {
      "format": "mp3",
      "maxDurationSeconds": 10,
      "maxNumberOfFiles": 2,
      "acceptedFormats": ".mp3,.wav"
    }
  }'
></deep-chat>
info

The use of this object will automatically disable the speechToText functionality.

AudioFormat​

  • Type: "mp3" | "4a" | "webm" | "mp4" | "mpga" | "wav" | "mpeg" | "m4a"

Allowed audio file formats.