Запуск бота с помощью перетаскивания в SharePoint Online

Question

Я хочу иметь возможность запускать моего бота, который находится на моем онлайн-сайте SharePoint, перетаскивая ему локальный файл.

Я создал WebPart для использования этого бота на сайте и поместил код для встраивания.by Azure.

Но когда я добавляю файл в бот, он открывает документ на новой вкладке, показывающий мне его содержимое.

Я хотел бы начать разговор, в то время как перетащить файл, какВот это: Начало разговора с ботом путем помещения файла

Я мог бы представить какое-то решение, используя опущенную зону в iframe, которая содержит бота, но она не работает.

Я посещаю какой-то сайт, который может помочь, но я не знаю, как это реализовать: Бот в WebChat , API DirectLine , Отправить активность боту

Этот GitHub также может быть полезен.

Answer 1

Вам потребуется обработать события ondragover и ondrop (отмена поведения по умолчанию) и опубликовать действие вручную:

html:

<div id="bot" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" />

Javascript:

const dl = new BotChat.DirectLine({
            secret: 'YourDLSecret',
            webSocket: false
        });

BotChat.App({
            botConnection: dl,
            user: { id: 'userid' },
            bot: { id: 'botid' },
            resize: 'detect'
        }, document.getElementById("bot"));

function dragover_handler(ev) {
            console.log("dragOver");
            ev.preventDefault();
        }

function drop_handler(ev) {
    console.log("Drop");

    ev.preventDefault();
    ev.stopPropagation();

    var files = [];
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
        // If dropped items aren't files, reject them
        if (ev.dataTransfer.items[i].kind === 'file') {
            var file = ev.dataTransfer.items[i].getAsFile();
            files.push({
                contentType: file.type,
                contentUrl: window.URL.createObjectURL(file),
                name: file.name
            });
        }
    }


    dl.postActivity({
        from: { id: 'userid' },
        type: 'message',
        attachments: files 
    })
    .subscribe(function (id) {
        console.log('files sent');
    });

}