Unable to send files uploaded by users on Bubble to Azure blob storage via API connector

In my application, users can upload multiple files in various formats, including PDF, image, and CSV. After the files are uploaded, I need to send them to Azure Blob Storage using the API Connector.

API Connector Setup:

I’ve attached a screenshot of my API Connector configuration for your reference. In the file parameter, I initially uploaded a static file as a placeholder. The dynamic file value is supposed to be set in the workflow, which is triggered upon the completion of the file upload.

Workflow Configuration:

In my workflow, I am setting the dynamic data for the file name using a repeating group and assigning the dynamic data for the actual file. However, I am facing a critical issue: each time I upload a new file, the file name updates correctly in Azure Storage, but the actual file content gets overridden by the static file I used during the API Connector setup.


Questions:

  1. How can I properly configure the API Connector to accept a dynamic file link so that the uploaded file content is sent to Azure Blob Storage instead of the static placeholder?
  2. Are there any specific steps or best practices to ensure that the dynamic file data from the workflow correctly replaces the static file in the API call?

Can you uncheck send file checkbox in your API connecter

Hi, @siddharth tried this.

A text file instead is getting stored in Azure Blob when I uncheck the send file option (though with the right file name as that uploaded). However, the content of the file has the Bubble URL which refers to the dynamic link in the workflow instead of the actual file uploaded.

Result:

The Steps undertaken


I see, actually the file you want to upload to azure is already saved in your bubble database, that’s why it’s referencing that url, can you try uploading a raw file, or use upload a file element

@siddharth right. I’m actually storing the files in a repeating group’s state (and then on to Bubble DB) from the multi-file uploader’s value. How do i upload the file dynamically (user’s uploaded file)?

When the user upload file, use that raw uploaded file (don’t save in db) to send it via API connecter to azure

@siddharth tried this where before creating a thing (storing uploaded files in DB), I’m sending it to Blob via API

a

Still getting the same error where A text file instead is getting stored in Azure Blob where the content of the file has the Bubble URL which refers to the dynamic link in the workflow instead of the actual file uploaded.

Can you first try this API in postman and then see if it’s working.
Then try replication here.

Also blobs are used for images, are you trying to upload pdf or similar?

@siddharth Its working in Postman when i attach a file in Body parameter using form-data - unable to replicate it in Bubble to dynamically fetch files

Note: However, appending URL of the file in body here in Postman doesn’t work.

Hi @Jici @Zeroic - in case you can help here as well :pray:

@siddharth i thought blob would be for any data format type?

But also tried it for images, pdf, csv alike. Problem still persists :frowning:

If your data is overwrite by what you have set in API connector, this i Because the value in your action is empty.
First thing is to delete the API Connector file. In this case, this will send an empty value and pobably return an error instead. Always clear API connector test values.

Bubble with get the file to send it as binary from the url you have set. So no need to have a base64 function

Finally, you cannot send a list of files. Send only 1 file at a time. (you can use SAWOL) If you want to send multiple file, this is more complex and need to use raw body instead and create your own multi-form encoding body.

@Jici i tried the following

  1. Removed API connector static file (got an error on initialization but ignored it, surprised it doesn’t matter)
  2. Then put the dynamic URL of the file in the “file” parameter input of API in workflow. To cross check if URL is correct, I pasted it on a text box on the front-end too and the correct file URL is getting displayed. But I still get the API error that the file parameter is not valid


Result Error-

What do you suggest?

Don’t use first item’s url. Just first item. Also, you didn’t change the file name to only send 1 file.

By the way, removing test value in API Connector is done AFTER you initialize the call, not before. You don’t need to reinitialize the call after your remove the values.

Finally, actually, you change th content-type to octet-stream. This is false and something not handled by API Connector. The content-type you are sending is a multipart form-data. However, I’m not sure if Bubble allow you to overwrite the type in form-data option or not. So maybe it’s sent as form-data even if you tried to overwrite it.

Do you have link to API doc?

@Jici -

Removed URL and kept it at first item, but got the same error that file parameter is not a valid file. Could you help understand what you mean change file name to send 1 item only?

Yes did that only.

This was in API documentation

In the meanwhile, API docs are as follows-

  1. Blob Storage REST API - Azure Storage | Microsoft Learn
  2. Put Blob (REST API) - Azure Storage | Microsoft Learn

Did a few research and this service doesn’t seem to accept multipart form-data.

When you initialize API Connector, is it working as expected? File content and name?

file-name is what I mean to only send 1 file name. Actually, your are not using list of file:first item’s file name

@Jici

Yes, it seems to be initialising as expected with the correct file content and file name.


Call was initialised after attaching static dummy file which was reflected in Blob, this screenshot is after removing the static file

Tried using ist of file:first item’s file name is as well, getting same API error - that file parameter is not a valid file

Any suggestions on how to go about then?

If you got it working in API Connector when you initialize it, there’s no reason that it doesn’t work in run-mode. So the error is in your action settings.

Can you set your app in public view mode and share editor url in DM?