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://docs.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!

回答1:

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/react@16.5.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/react-redux@5.0.7/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>

来源：https://stackoverflow.com/questions/55269415/prompt-user-to-upload-file-in-dialog-flow-with-ms-bot-framwork-v4

标签

botframework