Wysyłka obrazu

Jak wysłać obraz?

Do szablonu strony który możesz znaleść tutaj dodamy przycisk

Uwaga

Aby wysłać plik połączenie musi myć utworzone.

<input type="file" id="chatImageFilePicker" accept=".jpg,.jpeg,.png,.bmp">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Samouczek: Conpeek SDK</title>
</head>
    <body>
        <video autoplay id="conpeek_plugin_video_box"></video><br>
        <button type="button" id="CHAT" disabled onclick="onClickChatButton()">Chat</button><br>
        <textarea id="conpeek_plugin_chat_message" rows="1" name="conpeek_plugin_chat_message" placeholder="Wpisz wiadomość..." style="height: 35px;"></textarea><br>
        <input type="file" id="chatFilePicker">
        <button type="button" onclick="onClickSendFileButton()">Wyślij plik</button><br>
        <input type="file" id="chatImageFilePicker" accept=".jpg,.jpeg,.png,.bmp">
        <button type="button" onclick="onClickSendImageFileButton()">Wyślij obraz</button><br>
        <script type="text/javascript" src="conpeek.js"></script>
    </body>
</html>

Podpowiedź

Na potrzeby przykładu dodaliśmy przycisk Wyślij obraz.
Najpierw wgraj obraz a później naciśnij przycisk wyślij który wywoła funkcję onClickSendImageFileButton().

Aby wysłać plik wystarczy wykonać funckję

$conpeek.dialog.uploadFile("<<element>>");

<script type="text/javascript">
$conpeek.initialize({
    url: 'https://example.conpeek.com',
    plugin_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    media_tag: 'conpeek_plugin_video_box',
},
function (success, params) {
    if (success) {
        $conpeek.event.registerCallback("plugin_subscription", "ready", () => {
            $conpeek.util.updateTargetData("Help Desk", function(success, body){
                if(success) {
                    document.getElementById("CHAT").disabled = false
                }
            });
        });
    } else {
         alert("Inicjalizacja nie powiodła się")
    }
});
function onClickChatButton() {
    $conpeek.dialog.connect({ 
        media: ["chat"], 
        presentation: "John Doe", 
        destination: "Help Desk"
        }, function () {
            $conpeek.chat.send("Hello World!");
            $conpeek.event.registerCallback("chat", "chat_message", function (data) {
                console.log(data)
            });
            $conpeek.chat.registerDetectInput(document.getElementById ("conpeek_plugin_chat_message"));
        }, function () {
            alert("Tworzenie połączenia nie powiodło się");
        });
    };
function onClickSendFileButton() {
    const chatFilePicker = document.getElementById('chatFilePicker'); 
    $conpeek.dialog.uploadFile(chatFilePicker);
};
function onClickSendImageFileButton() {
    const chatImageFilePicker = document.getElementById('chatImageFilePicker'); 
    $conpeek.dialog.uploadImage(chatImageFilePicker);
};
</script>

<<element>> - input element

W następnym kroku dowiesz się jak odbierać obraz.