Upload files
# 📖tutorials
q
(I'm travelling and away from normal tools 🤖 🛠️ 🧑‍💻 but I wanted to quickly try something) With this you could let your chatbot users to: **Upload files Download files Update files Delete files** Now I'm only building (or trying to build) the first one: Upload files And in this short tutorial I'll focus on the JavaScript part, not so much on the simple Botpress chatbot part, you can download the bot here and combine this workflow with your own more advanced chatbot and use case 👍
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.
Copy code
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.
Copy code
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.
w
Thanks @quick-musician-29561, a very popular and in-demand feature
q
This is certainly not as sophisticated as the official version that @fresh-fireman-491 mentioned is coming from Botpress. But since he was answering questions and helping everyone solve problems here even at Christmas 🦾👏 and I saw that this was asked three times on the same day, I wanted to help as well and see if there was even a temporary solution to this.
j
cool
c
wow this is crazy
thank you very much ❤️
m
Will see if it works. But only for web builds? Not on social bots - right?
f
This tutorial is made for the webchat and to be used on websites, correct. You can do somethings with other integrations. Here is an example from the docs about the WhatsApp integration https://botpress.com/docs/cloud/channels/whatsapp/#media-images-audio-documents
r
@fresh-fireman-491 Is there any simple method to upload files within the website and inside the bot press chatbot UI?
f
Not yet, but there should be something coming for it
m
great
Does anyone know how to add twilo sms on your ai chatbot
m
@fresh-fireman-491 thanks for sharing the link, we're trying to get file uploads working for WhatsApp. Obviously WhatsApp already has the option to upload files however our GPT always replies saying "looks like we're having trouble viewing that" etc. Sorry for the newbie question but... am I right in thinking we need to build out some additional features in the Botpress editor to handle the files and pass them on to Open AI? And that is what this link you shared is detailing. Many thanks 🙏
q
Botpress just released files API
m
That's great news, thanks for sharing. If this feature isn't something that I can achieve with a no-code approach like I have done with importing Custom GPTs using the Chrome extension, then I'll need to hire someone that knows Botpress well to create it for us. Is there a place the Botpress team prefers I post this kind of request?
q
I'm guessing the community will soon start building and sharing some workflows using the files API for everyone to use. #1111009377525186570 section is also where you can share your project so far and ask for ideas and solutions. And there's always the option to hire an expert https://botpress.com/experts
m
Thanks!
s
may be usefull, i made tg open ai bot with file upload at make com and when i attached file id to message gpt replied about problems viewing file, that was fixed whet i also pasted name of file in message
w
Hey, how can I make the bot accept pdf and doc files and store the information in the knowledge base to be used by the bot? Any help to do this will be much appreciated
f
Hey there, You can't do it just yet, but the Botpress team is working on it
w
@quick-musician-29561 i found a way to upload txt files using web chat only ! (Maybe someone found it before me 😉 )
I will try to make a tutorial soon
Unfortunately it works only with txt files 😅
q
Great! Looking forward to that 🔥 🛠️ 💎
I've had similar experiences; some ideas work with images only, some with text. For audio, I need to use servers.
w
You succeed in uploading images ??
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
f
That is because you are using the new webchat (V2). He is using the old one.
q
Yes, most of my tutorials are quite old already. I was normally just experimenting with some interesting stuff that were not built-in Botpress features, but now I think most of them are.
b
Cool. I've not seen how to upload a pdf. Is that a thing now? To S3?
q
Sorry for not replying sooner 🙏🏼 I'm pretty sure we managed to upload images in some projects as well. Those old tutorials from me and others are difficult to find, as I have mentioned earlier. If there is no activity for a certain period of time, they don't appear in the #tutorials and #share-your-bots channels, even though they can still be quite useful. I think server admins can modify the duration for which they remain visible.
b
have you found a way to upload pdf? what we want to do is have a user upload a pdf to our S3 aws bucket, then get that over to openAI assistant who will run an analysis, then send findings back to the chatbot to report to the site visitor ... all in under 45 seconds. what are your thoughts on that @quick-musician-29561?
d
same
64 Views