Uploading a file to an external API

Need help APIs
1

Hi,

I have external API that expects a file as an input and provides a json response. I am trying to figure out how I can have a user upload a file to my Bubble app and then send that file from my app to this API. I know how to create the FileUploader element of course but am not able to figure out how to send the file itself.

The external API expects the file in the following format (in javascript):

const response = await fetch("<external API endpoint url>", {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify({
		data: [
			{"name":"zip.zip","data":"data:@file/octet-stream;base64,UEsFBgAAAAAAAAAAAAAAAAAAAAAAAA=="},
		]
	})
});

Any help is highly appreciated. Thank you!

2

Hi @vamsi.tetali

API CONNECTOR Plugin might help

image
image733×489 25.8 KB

image
image736×434 27.7 KB

3

I have the connector set-up and tried exactly this but got the following error:

There was an issue setting up your call.

Raw response for the API 
Status code 422
{"detail":[{"loc":["body"],"msg":"value is not a valid dict","type":"type_error.dict"}]}
4

Solved - I have been able to figure out how to send the file in the format my external API was expecting. Had to use a Base64 encoder plugin. Ended up being quite easy because of that plugin actually.