How to send files from File Uploader element in POST request

[dburkhart]

I built an API Connector that triggers a webhook. I am triggering this using a button.
I also have a File Uploader component.

All I want to do is be able to pass the file in my File Uploader to my API endpoint.
Whatever file is in my File Uploader should be sent to the API endpoint when I click the Trigger Webhook button

Below are some images of my page, the workflow of my button, and my API connector:
Ideally I want a downloadable URL as the input but a base64 format of each file works as well. As long as all input files are sent in the input in the same way it should work.

I really appreciate any help!

[Jici]

Can you provide API doc url? Bubble API connector cannot always be use to send file. Normally, you will add a parameters and select the file checkbox

[dburkhart]

@Jici Thanks for the response!

I am triggering a webhook node in n8n.io that kicks off a flow.
Here is the Webhook node documentation: Webhook | n8n Docs

My node looks like this is n8n:

The API call in Bubble already starts the flow. The only thing I do not know how to do is reference the files in the File Uploader element and pass it as an input.

I believe this should be possible as it can be done in Glide.
I am new to Bubble.

[Jici]

Did you add parameters and select “file” checkbox?
Once it’s done, you will be able to reference the file uploaded in fileuploader.

[dburkhart]

I am assuming you are referring to the API call for the parameters. So change the datatype from JSON to File it seems.

And then regarding actually linking the file in the File Uploader element to the API call when I click a button. Will that then be available in the workflow editor of the button?

[Jici]

Sorry, I forgot to tell you to swith to form-data
You need to set the API Call to “action” to make it available in action in workflow.

[dburkhart]

Yes, so I think that is finished unless more needs to be edited in the API call:

The button already triggers the API flow in the workflow editor.
I am unsure where in the workflow editor to fill the file as the input:

[Jici]

In this action, one you will have the file parameters (don’t forget to remove private checkbox), you will have access to this parameters. Just reference fileuploader value

[dburkhart]

I am struggling to find what you are referring to :

[Jici]

In your API Connecter, change body type to form-data.
Add parameters
Select file, remove private
Once it’s done, you will have access to this parameters in the WF action

[dburkhart]

Thank you so much!

[Jamaalniya]

Hi there, I’m having an issue at this part, when I try to initialise the plug-in, it asks me to add a file to the value parameter? What should I do at this section

[Jici]

Can you share a screenshot?

[Jamaalniya]

Thanks for the quick reply

[Jici]

Click on upload, and select a file

[Jamaalniya]

I did however when I upload, the file I get this

Although it successfully uploaded on Webhook? Am I missing something?

[Jici]

Which response type did you select in API Connector?

[Jamaalniya]

I’m not sure where the response type is, do you mean http method?

[Jamaalniya]

It works now I ticked the response type, thanks for your help

[pezzitax]

I have no idea response type is, where is it located