Let's say you have a chatbot where you want users to ask questions about CVs (employers) and upload CVs (employees).

there's a Knowledge Base table called "cv", with columns "name", "CV", "fileName"

and now it's empty

Go to the website (I'll share that also later in this tutorial), click the chatbot and say start the conversation. You can ask questions or upload a file. Click "Upload a file"

The chatbot will ask you to upload your file. Click on the "Browse..." button on your webpage and select the correct file. Here the user named Anna Garcia selected the file named "anna_garcia.txt", which is a resume file, then enter the full name.

When you click the "Submit" button, it tells the bot that here's my CV, and downloads the CV (which in this case is .txt file) into your chatbots Knowledge Base

Check your KB table and there's a new file.

Now user called John Smith also downloads his CV.

Check your KB table (click Refresh), and now there are two CVs.

I asked questions that can be answered in Anna Garcia's CV

and John Smith's

Copy these script tags from your bot into your websites HTML file (I'll share the complete file).

You'll need to add these into your website: a file input field where users can browse their local device to select a file, create a text input field where users can enter text (in this case their full name), and a submit button, when clicked triggers an action to submit a file into a Botpress Knowledge Base.

html
    <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>

and also this JS script tag to: store the selected file into a JavaScript Blob, send that to Botpress as a webchat payload.

js
<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
            });
          };
          reader.readAsText(selectedFile);
        }
      });

      submitButton.addEventListener('click', function() {
        if (blob) {
          blob.text().then(function(text) {
            console.log('File Name:', fileName);
          });
        }
        const inputValue = document.getElementById('name').value;
        if (textContent) {
          console.log("part-1");
          window.botpressWebChat.sendPayload({
            type: 'text',
            text: "Here is my CV",
            payload: {
              name: inputValue,
              cv: textContent,
              fileName: fileName
            }
          })
        }

      });

    </script>

A JavaScript Blob is a container for binary data, which can be things like files, pictures, or sound. We can use Blobs in web apps and chatbots to do stuff like sending files, dealing with media (also videos!), or handling data from the internet. It's a nice way to manage binary data in JavaScript.

Here's the Code Playground https://jsfiddle.net/devmik/ucfn7v38/37/ Let me know if you tried it, and especially if you can use it in your projects! 🫡

I also tried earlier some examples where there was a product list in Knowledge Base, and the user (who has permissions to it) was able to update the product list, it worked fine. Advanced use cases for this could be that the chatbot asks what files you want to update, and it may require a password, or maybe in some cases anyone is able to upload and download files, but if you want to delete files, it requires a password, or you could filter files by userId etc. Consider this as a poor man's solution until Botpress provides an official solution to this. I always like to practice these in advance, so that when a better version of this is built-in to Botpress, we already know to which workflows integrate it into, because we've already had time to practice it.

thank you very much ❤️

Does anyone know how to add twilo sms on your ai chatbot

Botpress just released files API

I will try to make a tutorial soon

Unfortunately it works only with txt files 😅

I've had similar experiences; some ideas work with images only, some with text. For audio, I need to use servers.

it should be possible to import pdfs (with text only) but this requires a library to read the pdf and I haven't managed to import this in a block execute code

Man I'm so sad, it works perfectly in the studio, but not when the bot is published.

it's like the code isn't executed

Some old practice projects: Part 1. https://discord.com/channels/1108396290624213082/1197302408724885564 Part 2. https://discord.com/channels/1108396290624213082/1197910966768238684