File Picker user input control

  • Release version: Xanadu
  • Updated November 5, 2024
  • 5 minutes to read
  • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of File Picker user input control

    The File Picker user input control in Virtual Agent topics allows users to upload image or any file type directly within conversations. Uploaded images display immediately, scaled to fit the chat window while maintaining aspect ratio. This control supports all file types except SVG image files and is designed to work consistently across multiple client interfaces and communication channels.

    Show full answer Show less

    Key Features

    • File Type Support: Accepts all file types except SVG images. Images can be high resolution but are scaled for display.
    • Client Interface Variations: Users can upload files through clicks, drag-and-drop, or paste (image files only) depending on the client platform (Web UI, Microsoft Teams, Slack, Workplace, ServiceNow Mobile, etc.).
    • Integration with Microsoft Teams: Upload via attachment icon or drag-and-drop; supports copy-paste for images.
    • Live Agent Interaction: Supports a combination of text, files, and emojis but does not support SVG or formatted text. Uploads are validated and virus-scanned.
    • File Linking: Uploaded files can be linked to cases created using the Record Action utility.
    • Configurable Properties: Includes node name, variable name, prompt text, file type allowance, confirmation messages, conditional visibility, and skip logic.

    Using the File Picker Control

    The file selection method varies by platform:

    • Web UI: Click to upload file from local computer.
    • Slack: Use the green plus icon to select files.
    • Microsoft Teams: Paste images or upload via attachment icon.
    • Workplace: Use the image icon to upload files.
    • ServiceNow Mobile: Upload from device photo library (requires enabling all file types).

    Channel Support and Constraints

    ChannelSupportConstraints
    Web UISupportedNone
    Mobile UISupportedPermission prompt for camera or file system if not previously granted
    Now Assist panelSupportedNone
    Microsoft TeamsSupportedNone
    SlackSupportedNone
    WorkplaceSupportedNone
    Facebook MessengerSupportedSupports JPG, PNG, BMP, MP4 only; max 10 MB images, 200 MB videos
    SMS TwilioPartial supportImages only
    LINESupportedSupports JPG, PNG, BMP, MP4 only; max 10 MB images, 200 MB videos
    WhatsAppSupportedNone
    Apple Messages for BusinessSupportedNone
    Alexa (Voice)Not supportedNot applicable

    Practical Considerations for ServiceNow Customers

    • Use this control to enhance user interactions by enabling file uploads within Virtual Agent conversations, improving case documentation and issue resolution.
    • Configure prompts and confirmation messages to personalize user experience and validate uploaded files.
    • Leverage conditional display and skip logic to streamline conversations based on user context.
    • Be aware of platform-specific behaviors and constraints, especially regarding file types supported and upload mechanisms.
    • Ensure file uploads are linked to cases properly using the Record Action utility for efficient case management.

    Use the File Picker user input control in a Virtual Agent topic to prompt a user to upload an image or any file type. After the user uploads an image file, the image appears immediately in the Virtual Agent client.

    File Picker user input control properties

    All file types are supported by the file picker, except the SVG format for image files. Although the image can be high resolution, the image displayed in the Virtual Agent client is scaled based on the aspect ratio. Images scale to fit within the chat window.

    In Microsoft Teams, a file can be uploaded through the paper clip (attachment) icon, or using drag-and-drop. Copying and pasting only works for image files. Users can share attachments on Microsoft Teams through the Virtual Agent file picker user input control, and by sending attachments while chatting with a live agent.

    The live agent picker scenario:
    • Doesn't support the SVG format for image files.
    • Supports a combination of text, files, and emojis. However, orders may show up differently between how a user sends these items versus how an agent views these items.
    • Doesn't support formatted text.

    When a file upload is in progress, you can't upload or enter text for the file picker control. The uploaded files go through a virus scan and validation.

    You can link an uploaded file to a case you create using the Record Action utility. For more information, see Record Action utility.

    The following table lists the details about the properties of the File Picker.
    Table 1. File Picker properties
    Property Description
    Node name Name that identifies the File Picker user input control node in the topic flow.
    Variable name Name of the variable that stores the user response to this prompt. The variable name is automatically created from the Node name property.
    Prompt Prompt or question asking the user to upload the item. The prompt can be a text string that includes variables or a script that returns text.
    Allow user to upload Type of file to upload. All file types are supported, except the SVG format for image files.
    Advanced
    Confirmation messages
    Input completion confirmation

    Bot response shown to the user when the node interaction is complete. The message can be either a text string or a script that returns text. For example, if you're using dot-walking: Thanks, (Input Variables > Username)! Or if you're using a script, the acknowledgement might be: Thanks, {{vaInputs.username}}!

    Default value confirmation

    Message that asks the user to verify that the value in the Default value field is correct. This message is used instead of a value in the Prompt field. It can contain either a text string or a script that returns text. For example, if you're using dot-walking: Are you (Input Variables > Username)? Or if you're using a script, the confirmation message might be: Are you {{vaScripts.lastUsername}}?.

    Hide or skip this node
    Conditionally show this node if

    No-code condition statement or low-code script that specifies a condition for presenting this node in the conversation. The condition must evaluate to true.

    Allow user to skip this node if

    No-code condition statement or low-code script that specifies a condition for letting users skip this node in the conversation. The condition must evaluate to true. You can set this field using either the condition builder or a script.

    Skip reprompting if No-code condition statement or low-code script that specifies a condition for letting users skip reprompting in the conversation. When a preceding node is revisited through a topic loopback or Dialog Act, the Virtual Agent bypasses this node and automatically retain its original value.

    Using the File Picker control in different client interfaces

    The process to select an image differs based on the Virtual Agent client interface. Use the following steps to select an image in the client interface of your choice.

    The following table lists details about the File Picker control in different client interfaces.
    Table 2. File Picker control in different client interfaces
    Platform Steps to select an image or file
    Web UI
    1. Select Click here to upload an image. or Click here to upload a file.
    2. Select a file from your local computer. All file types are supported.

    Slack

    1. Select the Green + icon.
    2. Select Your computer.
    3. Select an image file from your local computer.

      All file types are supported.

    Microsoft Teams

    1. On your local computer, copy an image file.
    2. Paste the image file into the text input field in Microsoft Teams.

    Workplace

    1. Select the Workplace image icon Workplace image icon..
    2. Select an image file from your local computer.

      All file types are supported.

    ServiceNow mobile

    1. Touch Upload an image.
    2. Select an image file from the photo library on your mobile device.
    Note:
    The Upload a file button is only available when you enable the All file types file picker property.

    Example of a File Picker user input control

    Note:
    Virtual Agent Designer controls may display and function differently in other channels.
    File Picker properties File Picker prompt
    Figure 1. File Picker user input control basic properties
    Basic properties include the node name, prompt, and file type, either Image or All file types.
    Figure 2. Web UI file picker prompt (image)
    In a chat window, the prompt reads, "Please upload your image." The button reads, "Click here to upload an image."
    Figure 3. ServiceNow mobile file picker prompt
    Prompt that reads, "Please upload a file for the detailed description of the case." There are three options: Upload an Image, Take Photo, or Upload a File.

    Channel support

    The following table lists the details about the channel support for the File Picker user input control.
    Table 3. Channel support for the File Picker user input control
    Channel Support Constraints
    Web UI Supported None
    Mobile UI Supported

    Prompt that users see asking for permission for the app to access a camera or file system if the user has not already given the permission.

    Prompt that reads, "Mobile" Would Like to Access the Camera. The choices are "Don't Allow" and "OK."

    Now Assist panel Supported None
    Microsoft Teams Supported None
    Slack Supported None
    Workplace Supported None
    Facebook Messenger Supported
    Supported file types are JPG, PNG, BMP, and MP4. The files have a maximum size limit based on the file type:
    • For images, the maximum size limit is 10 MB.
    • For videos, the maximum size limit is 200 MB.
    SMS Twilio Partial support Image files only
    LINE Supported
    Supported file types are JPG, PNG, BMP, and MP4. The files have a maximum size limit based on the file type:
    • For images, the maximum size limit is 10 MB.
    • For videos, the maximum size limit is 200 MB.
    WhatsApp Supported None
    Apple Messages for Business Supported None
    Alexa (Voice) Not supported Not applicable