Sara always deserves a special salute.

In the image above, the pink text on the right is part of the Data URL, and all Data URL text is even 5 times larger. The Data URL of that opening post image takes up 5 rows in the KB table. On the left side, I managed to save the first chunk of it in the KB table. This is much easier if you use an external database, but I wanted to try how to build it using just a web page, Botpress, and JavaScript. The main goal here is to build a small test chatbot for those who want to practice the 'Upload Images' feature so that bot builders are ready when it's built into Botpress.

Username 'bob' uploaded an image named 'image-3.png' with a size of 170kB. Initially, it's compressed to a much smaller size on the website. When it's stored in the chatbot, the Data URL is divided into 5 chunks, each smaller than 4kB, which is the maximum row limit for the Botpress KB table. Each chunk is saved in a separate row in the imageTable, named '_part_0', '_part_1', and so on.

My goal yesterday, when I noticed that many fellow bot builders needed this, and after that (Botpress's official solution) our chatbots would become even more valuable, was to practice with: Allow users to upload images to the chatbot ✅ Display images in other parts of the chatbot ✅ Store images in the chatbot in small chunks ✅ Recreate images from those chunks 🛠️ The missing part is crucial, as it enables chatbot owners to easily browse through the images uploaded by users.

Execute code card so far (34 lines of code)

js
let { name, image, imageName } = event.payload.payload
workflow.name = name
workflow.image = image
workflow.imageName = imageName

const dataUrl = workflow.image;
const base64Data = dataUrl.split(',')[1];

const CHUNK_SIZE = 4096;
const base64Length = 3 * Math.floor(CHUNK_SIZE / 4);

const chunks = [];

for (let i = 0; i < base64Data.length; i += base64Length) {
  chunks.push(base64Data.substring(i, i + base64Length));
}

workflow.chunks = chunks;

for (let i = 0; i < chunks.length; i++) {
    try {
        await imageTable.createRecords([
            { 
                name: name, 
                imageName: `${imageName}_part_${i}`, 
                imageURL: chunks[i] 
            }
        ]);
        console.log(`Record for chunk ${i} created successfully`);
    } catch (error) {
        console.error(`Error creating record for chunk ${i}:`, error);
        break;
    }
}

simple website for the project

remember to publish your chatbot, and use your configurable webchat code instead of mine

chatbot file (still in testing phase)

I added a new column 'urlHeader' for detecting what type of image user uploaded, .jpeg, .png, etc.). That is needed when recreating the images from chunks

that was three more lines of code

Chatbot owners can then connect the Start node to another node, and using Find Records card filter the username and browse throught the images users have uploaded

In addition to the first Execute code card (37 lines), for recreating the images from chunks, I added the second Execute code card (10 lines)

js
let filteredResults = workflow.filteredResults;
let userImage = '';

filteredResults.sort((a, b) => a.id - b.id);

filteredResults.forEach(item => {
    userImage += item.imageURL;
});

workflow.userImage = filteredResults[0].urlHeader+userImage

And now everything on my todo-list seems to be working: Allow users to upload images to the chatbot ✅ Display images in other parts of the chatbot ✅ Store images in the chatbot in small chunks ✅ Recreate images from those chunks ✅

I believe this test version is a helpful starting point for users who want to plan how the upcoming official 'Upload images' 🚀 feature can best suit their needs. Once I have everything finalized for this unofficial small test version, I will upload the chatbot file here. Additional things for 🛠️ bot builders 🫡 to consider: On average, based on my testing one image occupies about 10 rows in the KB table (using this Data URL method). With a maximum of 5000 KB table rows (with free plan, but you can buy additional 100,000 table rows), you can store approximately 500 user-uploaded images on average to one KB table. If you have a big business and a lot of users, or don't want to store all the images in one KB table, consider creating multiple empty KB tables (e.g., 5) in advance for user images. The chatbot can then automatically switch to the next KB table if the current one starts to fill up, or is close to the row limit you want. If your users can upload multiple images to the chatbot, consider implementing filters based on usernames and also image names. You can also create a carousel to display all the uploaded images by user. These features will be valuable when the official version of Botpress for image uploads is ready, ensuring our chatbots are ready for both testing and production 🤝

Next user uploaded a bigger image (366.5kB), that took 11 rows

chatbot owner can then go through the images filtering by username

using Find Records card

in a real-world scenario that should be automated too, but this is good enough for testing.

Latest chatbot file

latest HTML file for a simple website to test this project.