How to configure storage for Typebot on Cloudron

[LoudLemur]

Typebot seems to require S3 compliant storage, something like object storage, in order for you to accept files / uploads from your typebots. For example, if your typebot asks, "Please upload a screenshot" you need a place to store the file.

How do we configure this? The documentation is here, but it is not obvious what to do.

Here is an attempt (which doesn't work) at getting the typebot to use object storage on Vultr.

# Add custom ENV configuration in this file
# https://docs.typebot.io/self-hosting/configuration
# I have replaced the variables with ****
# Unsplash 
export NEXT_PUBLIC_UNSPLASH_APP_NAME = ****
export NEXT_PUBLIC_UNSPLASH_ACCESS_KEY = ****
#GIPHY
export NEXT_PUBLIC_GIPHY_API_KEY = ****
# Object storage on Vultr
S3_ACCESS_KEY = ****
S3_SECRET_KEY = ****
S3_BUCKET = typebot
S3_PORT = 443
S3_ENDPOINT = ****
S3_SSL = true
S3_REGION =  ****

[nebulon]

Do you have any error for context and make sure to use export statement for each line, to actually make the variable available for the app.

[LoudLemur]

@nebulon said in How to configure storage for Typebot on Cloudron:

Do you have any error for context and make sure to use export statement for each line, to actually make the variable available for the app.

Hey, @nebulon, thank you very much for looking at this.

This is beyond me. I tried a completely fresh installation of Typebot to resolve it. There are still some problems.

Even if I enter the line for giphy on its own, I am unable to successfully stop and restart Typebot. I have managed to get giphy to work with Typebot though.

The same thing if I try with the two lines needed for unsplash.

I am forgetting about the object storage, as I can't even get the typebot to work at all unless everything is removed with commenting.

This might well be due to me and not understanding something. Somebody with more skills will be needed to resolve this, if it happens to them.

[staypath]

Here's a working config sample for Digital Ocean Spaces. Add the following entries in the env.sh and restart the Typebot app:

export S3_ACCESS_KEY=<YOUR DO ACCESS KEY>
export S3_SECRET_KEY=<YOUR DO SECRET KEY>
export S3_BUCKET=<YOUR BUCKET NAME>
export S3_ENDPOINT=nyc3.digitaloceanspaces.com
export S3_REGION=US
export S3_PORT=443

[timconsidine]

This post is deleted!

[LoudLemur]

I still haven't managed to get file saving to work using aws object storage on Vultr.

I think it might be because we need to go into the Object Storage bucket and create and edit a couple of files, cors policy and access policy, as explained here:

https://docs.typebot.io/self-hosting/guides/s3

Did anybody else have to create files in their bucket in order to have file storage work?

[staypath]

I just went into Digital Ocean and configured the CORS policy as it states. There's a gui for that:

Then I had to configure the ACL using s3cmd. It was tedious, but once done it just works forever.

[LoudLemur]

We are still not quite there!
Vultr recommends using CyberDuck to upload files to your bucket, and there is a clear and helpful explanation on how to accomplish this here:
https://www.vultr.com/docs/how-to-use-cyberduck-with-vultr-object-storage

There is a tricky part afterwards, though. According to Typebot documentation, a command needs to be run, but it doesn't specify how or where:
https://docs.typebot.io/self-hosting/guides/s3

Where would we run that command? In Cloudron? In the Typebot application somehow? In Cyberduck? On Vultr somehow? On your laptop?

Also, it is not too clear how to specify the path. For example, at the end, do you enter:

aws s3api put-bucket-policy --bucket <bucket-name> --policy file://<path-to-policy>

--policy file://https://

or

--policy https://

[jdaviescoates]

@LoudLemur said in How to configure storage for Typebot on Cloudron:

Where would we run that command? In Cloudron? In the Typebot application somehow? In Cyberduck? On Vultr somehow? On your laptop?

The times I've had to do that to get CORS stuff to work it was on my laptop, so I'd guess that is the case here too.

@LoudLemur said in How to configure storage for Typebot on Cloudron:

Also, it is not too clear how to specify the path. For example, at the end, do you enter:

As you're post the command on your laptop the path is to a file on your laptop, e.g. if it's in your home directory on ubuntu it might be file://cors.json

But, for any of that to work you'll first need to install awscli on your local machine.

I followed these instructions (because I use Scaleway for my Object Storage needs), but presumably it's basically the same https://www.scaleway.com/en/docs/storage/object/api-cli/object-storage-aws-cli/

[LoudLemur]

@jdaviescoates said in How to configure storage for Typebot on Cloudron:

you'll first need to install awscli on your local machine.

Thanks! There are a lot of missing steps in the Typebot documentation!

[LoudLemur]

I tried again using awscli, but ran into errors:

Error parsing parameter '--cors-configuration': Expected: '=', received: 'EOF' for input:
https://ams1.vultrobjects.com/typebot/cors-policy.json
                                                      ^

I tried again, this time including
--policy file://https:// instead of just
--policy https://
and received this error:

Error parsing parameter '--cors-configuration': Unable to load paramfile file://https://ams1.vultrobjects.com/typebot/cors-policy.json: [Errno 22] Invalid argument: 'https://ams1.vultrobjects.com/typebot/cors-policy.json'

I also tried inserting an = in the command, as it seemed to want that, without success.

This is too difficult for me.

[jdaviescoates]

The cors policy should be on your local machine, and then you do something like this:

aws s3api put-bucket-cors --bucket bucket-name --cors-configuration file://cors.json

But for that to work you of course need to install and configure awscli on your local machine first.

In ~/.aws/config you have something like this (but with the region and endpoint url being whatever the appropriate values are for your bucket):

 [plugins]
endpoint = awscli_plugin_endpoint

[default]
region = fr-par
s3 =
  endpoint_url = https://bucket-name.s3.fr-par.scw.cloud
  signature_version = s3v4
  max_concurrent_requests = 100
  max_queue_size = 1000
  multipart_threshold = 50MB
  # Edit the multipart_chunksize value according to the file sizes that you want to upload. The present configuration allows to upload files up to 10 GB (1000 requests * 10MB). For example setting it to 5GB all>
  multipart_chunksize = 10MB
s3api =
  endpoint_url = https://bucket-name.s3.fr-par.scw.cloud

and in ~/.aws/credentials

[default]
aws_access_key_id = example_access_key_id
aws_secret_access_key = example_secret_access_key

[LoudLemur]

@jdaviescoates said in How to configure storage for Typebot on Cloudron:

The cors policy should be on your local machine,

Haha! Thank you, i have to try this when I can. I thought both the files had to be on the Object storage!

[robi]

This post is deleted!

[RazielKanos]

I ran into this as well - why is the topic set to solved?

do i get this right that you can't just upload stuff into typebot? Like avatars or mages users want to send?
Is there a workaround to use my local drive, where i installed typebot in?

[LoudLemur]

@RazielKanos said in How to configure storage for Typebot on Cloudron:

o i get this right that you can't just upload stuff into typebot? Like avatars or mages users want to send?
Is there a workaround to use my local drive, where i installed typebot in?

I am happy to mark this as unsolved, as I still haven't sorted this. It seems way to complex for a seemingly simple operation, i.e. enable storage for a file upload.

[girish]

I tried out using minio and it works - https://docs.cloudron.io/apps/typebot/#media-uploads

@LoudLemur maybe try minio because it doesn't require that aws CLI tool. I could do everything with the gui

[taowang]

This is very easy to solve! You don't need any S3 storage just to serve images. That's like using nuke to bomb an ant. Here is the solution:

Step1: Create a repository on your github account.
Step2: Upload an image (e.g. bot avatar) to your repository.
Step3: Copy the link of your image, then paste to jsdelivr (select "convert from Github").

Step4: Copy the JSdelivr link to your Typebot.

Now, you have a world-class CDN provider serving your image FOR FREE!!!
This link is permanent unless you purge it!