Prompt User to Upload file in Dialog Flow with MS Bot Framwork v4

I have a dialog flow that will require a user to upload a file/files. I would like to prompt the user and have them click on a button to open a file browse window to select the file they want to upload. I do not want to use the file chooser in the WebChat window text entry box (Users find this confusing). Is this possible? I saw in the documentation for v3 that there is a AttachmentPrompt dialog. However in the documentation for v4 I only see it mentioned in a one liner here... https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-concept-dialog?view=azure-bot-service-4.0 however other than that which sounds promising there appears to be no documentation on this functionality.

Thanks for any help you can provide!

Solution

PromptAttachment does not define client side rendering, or client side file upload code. In order to have the WebChat control respond to a custom button, you will need to provide an Attachment Middleware for the Web Chat control, and have the bot send a custom attachment type.

Custom Attachment:

private class FileUpload : Attachment
{
    public FileUpload()
        : base("application/uploadAttachment") { }
}

Replying with FileUpload attachment:

var reply = activity.CreateReply("Upload a File");                        
reply.Attachments.Add(new FileUpload());
await connector.Conversations.SendToConversationAsync(reply);

Page hosting Web Chat:

<!DOCTYPE html>
<html>
<body>
    <div id="webchat" />

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-redux.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

    <script>
        function uploadFile() {
            document.querySelector('[title="Upload file"]').click();
        }

    </script>
    <script type="text/babel">
        var chatbot = new WebChat.createDirectLine({
            token: 'YourToken',
            webSocket: true,
        });

        const attachmentMiddleware = () => next => card => {
            switch (card.attachment.contentType) {
                case 'application/uploadAttachment':
                    return (<button type="button" onClick={uploadFile}>Upload file</button>);

                default:
                    return next(card);
            }
        };

        WebChat.renderWebChat({
            directLine: chatbot,
            botAvatarInitials: 'Bot',
            attachmentMiddleware,
        }, document.getElementById('webchat'));

    </script>
</body>
</html>