JSFiddle - React, Tailwind, and code Playground

by devmik

HTML

<html>

  <body>
    <h1>
      Upload Files
    </h1>
    <p>Upload .txt file to Knowledge Base</p>
    <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
    <script>
      window.botpressWebChat.init({
        "composerPlaceholder": "Chat with bot",
        "botConversationDescription": "This chatbot was built surprisingly fast with Botpress",
        "botId": "597acb51-b9df-4fef-9962-32b359f167d1",
        "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
        "messagingUrl": "https://messaging.botpress.cloud",
        "clientId": "597acb51-b9df-4fef-9962-32b359f167d1",
        "webhookId": "75ea80ba-b4d9-4623-b477-885fece38b9f",
        "lazySocket": true,
        "themeName": "prism",
        "frontendVersion": "v1",
        "useSessionStorage": true,
        "enableConversationDeletion": true,
        "showPoweredBy": true,
        "theme": "prism",
        "themeColor": "#2563eb"
      });

    </script>

    <input type="file" id="textInput" accept=".txt">
    <br><br>
    <label for="textInput" id="textInput'">Your full name:</label>
    <br>
    <input type="text" id="name" name="nameInput" required>
    <br><br>
    <button id="submit">Submit</button>

    <script>
      const textInput = document.getElementById('textInput');
      const createBlobButton = document.getElementById('createBlobButton');
      const submitButton = document.getElementById('submit');
      let blob = null;
      let textContent = null;
      let fileName = null;

      textInput.addEventListener('change', function() {
        const selectedFile = textInput.files[0];
        if (selectedFile) {
          const reader = new FileReader();
          reader.onload = function(event) {
            textContent = event.target.result;
            fileName = selectedFile.name;

            if (blob) {
              URL.revokeObjectURL(blob);
            }
            blob = new Blob([textContent], {
              type: selectedFile.type
            });
      ...

CSS

body {
  background-color: goldenrod;
}