Easy file upload to Bubble using API fileupload

[gerbertdelangen]

Hi All,

Here a quick way to upload files to Bubble storage and make them private. Use the fileupload API that is available in every bubble app, here the API connector settings:

It used to be somewhere in the documentation but I cannot find it anymore. It took me quite some time searching the forum (this tip is also for future me ).

[georgecollier]

Oh cool. Never new how to make it private. No need to specify the data type?

[gerbertdelangen]

No, not needed indeed. It seems the unique ID’s must be unique to your app and not just the data type.

[Jici]

Exactly. You don’t need to set the type, only the unique ID. However, it doesn’t mean this is set into a field of this item. Only private to this item.

[cmarchan]

Bookmarked!

Thanks for the share!

[florianherzog]

Does anyone know if the /fileupload API can be used to upload file in chunks or accepts other encoding than Base64?

I’m trying to build a plugin where bigger files can be uploaded in backend so that, if files are uploaded by user without the thing that the file should be attached to already existing, the files can be reuploaded as private as soon as the thing is created.

Atm there is a tool aquired by Zeroqode which does that but also relies on base64 encoding. It seems that the plugin stops working with files larger then ~5.5MB

In theory it should work as the multifileuploader also relies on the /fileupload endpoint for files up to 50MB but I really cannot figure it out without proper documentation of the endpoint.

Best
Florian

[Jici]

The plugin that you are talking about is a server side plugin. Server side action are very limited in memory and this is why it fail if files are too large.

I guess fileupload endpoint should be able to handle large file upload… but from backend? not sure…

[florianherzog]

Yeah, currently the plugin I’m building always crashes due to memory constraints.
That’s why I’m trying to load only part of a file from the origin URL and upload in chunks to /fileupload to try to work within the memory constraints of 128MB. I’m just not clear if the /fileupload endpoint accepts chunked files…

[Jici]

I don’t think this is available from what I know.

[florianherzog]

Welp, anywhere you look in Bubble there are mind numbing limitations when it comes to trying to setting up your app to properly enable privacy for user data. It’s just so frustrating

[Jici]

Can you explain what is your issue exactly? How file is uploaded actually? From API Connector? Which type of file? (if this is large, is it a video?) Maybe you could consider a third party storage solution instead…

[florianherzog]

I’m providing my users with a regular file system (am building a multi-tenant procurement platform for construction services). The uploaded files get attached to Things and should be privacy gated. Based on my logic I must create the Things that are attached to in a backend workflow. So the users use Mutlifile uploader to upload files and these then are reuploaded with (currently) the Zeroqode plugin to get attached to the Thing created in the backend.

I don’t want to switch to a third party file solution as I’ve already tried it out and it will just add another layer of complexity to the already complex app. That’s why I’m trying to solve it with ‘vanilla’ Bubble File system and custom plugin…

[Jici]

You need to create an item for each file?

[florianherzog]

Heureka, I (and GPT & Claude) made it work!!
Will soon release the plugin

[florianherzog]

[FREE PLUGIN] Big File Uploader Backend <49 MB

Hey Y’all This plugin extends on the capabilities of ‘File Uploader Bubble API’ From a builders perspective, it works exactly the same. You Input a file, you select (optionally) what to attach to, select a new name and you get a reuploaded file returned. Main improvements are: file upload is possible up to a size of 49 MB Should be more efficient as binary data just gets passed from input to upload URL, rather than reading out the file and converting it with base64 encoding. Get it here f…

[aresh]

@florianherzog

Hey Y’all This plugin extends on the capabilities of ‘File Uploader Bubble API’ From a builders perspective, it works exactly the same. You Input a file, you select (optionally) what to attach to, select a new name and you get a reuploaded file returned. Main improvements are: file upload is possible up to a size of 49 MB Should be more efficient as binary data just gets passed from input to upload URL, rather than reading out the file and converting it with base64 encoding. Get it here f…

Is there anyway to increase the limit beyond 49 MB? With Bubble’s FileUploader element you can increase the size. The API seems to only take files less than 49MB… Seems like there should be a way for us to get more data in?

@Jici maybe you are aware of something here?

[Jici]

In backend WF?
The fileuploader (or any file uploader element) can go above this limit. The fileupload endpoint however seem to be limited to 50mb.

I’ve checked something in browser console logs. The first step seem to fetch an url using the fileupoad/geturl endpoint but there’s a JSON payload to submit that contain informations about the file and some more informations.
And after, with the response, the file is sent to the https://s3.amazonaws.com/appforest_uf endpoint as mutlipartform

I’ve tested and geturl seem to be easy to get. However, the call to send the file after return 403 forbidden. I’m not sure however if this is related to request using postman (so wrong origin) or if this need to have an AWS signature.

I don’t have time to do more test for that, but let me know if you found something

[Jici]

I’ve found what to do to make this work… and sadly, it’s seem too easy. I’Ve tested in Postman with a large file (200 mb) and no privacy rules. I will do some more test tomorrow…

[Jici]

Ok. So from insomnia, I was able to send a file (private if needed) larger than 50 mb. But you need to have Bubble element ID that point to a fileuploader element set to max file size.

After, the first step will be to send a POST request to https://yourdomain/version-test/fileupload/geturlwith this payload (you can replace the version to live if needed)

{"public":true,"service":"bubble","timezone_string":"America/Toronto","serialized_context":{"element_id":"aaaaa","current_date_time":1741126604489,"timezone_offset":300,"timezone_string":"America/Toronto"},"name":"filename.ext","size":115208192,"content_type":""}

You need to modify the payload with correct informations.
if you need to set it to private, you will replace "public":true by "attach_to":"unique_id to attach to"

this will return this kind of payload

{
	"url": "https://s3.amazonaws.com/appforest_uf",
	"fields": {
		"key": "",
		"x-amz-meta-appname": "meta",
		"x-amz-meta-app-version": "test",
		"Content-Type": "",
		"x-amz-meta-scheduled-id": "",
		"acl": "public-read",
		"bucket": "appforest_uf",
		"X-Amz-Algorithm": "",
		"X-Amz-Credential": "",
		"X-Amz-Date": "",
		"Policy": "",
		"X-Amz-Signature": ""
	},
	"file_url": "file url"
}

you need to do another POST multipart form request to the url from this payload and with all the needed key starting with “key”, x-amz-meta-appname, x-amz-meta-app-version, Content-Type, x-amz-meta-scheduled-id, acl, bucket, X-Amz-Algorithm, X-Amz-Credential, X-Amz-Date, Policy, X-Amz-Signature and at the end, the file (with file as key)
This should return 204 response. You can store the url from the previous payload or from the “location” header of the 204 response.

By the way, I said sadly because for me, this is a security issue. I was able to upload a file to Bubble storage (but was limited in size because the field was set to this size)

[florianherzog]

@aresh

Seems like there should be a way for us to get more data in?

The 49 MB limit comes from the /fileupload endpoint from bubble. For bigger uploads you have to hit another URL as per Jici’s statement. I currently don’t have a use case for bigger uploads – bringing the plugin to work by streaming the data was quite the hastle as the lambda functions are severely memory constraint.

As I don’t know how the other endpoint works exactly, I don’t want to try it out as I have to focus on other things atmo. But feel free to fork the code and generate a plugin for bigger uploads.

I might return to it in the future if no work has been done on that front.

@Jici

By the way, I said sadly because for me, this is a security issue. I was able to upload a file to Bubble storage (but was limited in size because the field was set to this size)

yeah it’s crazy, the endpoint is just open - no safety guards. However it’s clear from working with bubble for some time that security / privacy isn’t really fully engrained in the system.