Hi there,
I’m trying to make an API connection where I PUT a file that I have stored in my bubble database to the 3rd party endpoint. The call is succesful but the file always arrives corrupted. My endpoint only accepts binary files.
I have tried many solutions such as rowntreerob’s solution over here, API connector - Post.body as a binary file but this doesn’t apply to my use case as the file is already in the database at this point.
I have also tried fetching the file/image from the url where it is hosted at on bubble and then trying to transform it myself to binary using javascript but this wasn’t succesful. I have mailed bubble support about this but I’m not certain they will be adding this option.
Has anyone ever encountered this problem and how have you solved this?
Would love to hear any solution!
its been noted as a “gap” in bubble approach to support of PAAS style FILE API
re: file store in bubble DB . IMO the docs on files in bubble are kinda unique and it is not clear when bubble actually stores the files ( bytes ) and when it stores only a string value to be used to GET or FETCH the file ( a url ).
if its the former then its not clear how to get the files bytes as you would in JS ( file or blob ref ) and you need the proper ref & type to file ( blob or dataArray or nodeStream) before you can call your API expecting a binary as the POST.body…
obviously , with the the url, you can fetch the file in native JS and handle it as the type of your choice ( byteArray, blob, stream )
not a bubble expert , but if your binary endpoint is designed for simple JS Fetch.POST action where the binary is in the request body, then here is what id do…
with the URL allowing a GET from the bubble db, issue a GET to a private API that acts as a proxy to the API u mention.
The api route involves 2 steps
- Fetch the url and use the Response.body (containing the binary files bytes) as the input side of a PIPE
- PIPE the response directly to the POST to your api ie ( setting STDOUT from #1 to STDIN for #2 . independently supply headers for the step 2 post to your api and it will just work as seen here
regardless of where the file is actually stored, if you have the url and the headers needed for access, a simple proxy process ( runs in a server ) can do the following
- issue a fetch that returns the file ( binary in http.response.body )
- issue a 2nd fetch that POSTS the response body above to the endpoint you want the binary file provided to
tested out client-side in this fiddle
Note the service endpt at line 1 in the sample expects binary file in the post body and a content-type header corresponding to file’s type
sample docs
will add it to the git project as time permits
not recommended to run this from client as you get CORS issues and will have difficulty with security. Much better to consider api implementation when there are gaps in bubble’s features . The git project is a server implementation ( node JS ).
