Upload Binary data using API Connector

Hey guys,

I need to upload a file to cloudconvert.com API service to be converted. I have not idea how to perform this in bubble, but I have great success in postman Binary.

Any idea how I can perform this?

P.S. I know I can provide an URL for cloudcovert so it can fetch the file itself, but the problem all of the files uploaded are private.

4 Likes

Second that.

Have the same exact issue with the WRIKE API. Have to send attachments through “–data-binary”… No solutions in Bubble. And “raw” is not acceptable. I tried everything! I base 64 encoded the image and sent it - To no avail.

Fairly big limitation in the Bubble API Connector.

Have you found anything since then?

Nope nothing

We have the same issue now with one of the APIs that requires the file to be sent in binary via POST.
It’s currently not clear how to send the binary payload via the API connector.

Any advice or assistance from the team, please? @emmanuel
We’ve tried a lot of things, but none were successful so far.

 

Vlad Larin
GM@Bubblewits - #1 No-code Developer & Bubble Certified Partner
  Bubblewits.com - Get in Touch!
  Zeroqode.com - Buy Great Bubble Templates
  Builtwithoutcode.com - Bubble Apps collection
1 Like

No idea if this will help, but it looks like you’re supposed to specify “applicaiton/octet-stream” for binary data.

“Content-Type: application/octet-stream”

I need this capability as well. I’m trying to create a file on Google drive. See here.

@emmanuel, is there a way to do this, or are there plans to add this functionality?

@sudsy What you may be looking for is here: [New Feature] File option on API Connector plugin

Thanks, @w.fly, but as best I can tell, that won’t work in my case. Google’s API endpoint expects the raw image data, which is all I have. I don’t have a URL pointing to an image file.

@AliFarahat Have you had any workaround for this issue?

It’s also a problem for me, somebody know if someone found a solution?

Hi - any update here ? Also need to send a file as binary

Adding an HTML element with the following code worked (remove the space and a in the script tag) :

<label>Select file to upload</label> <input type="file" id="files" name="files[]">

< script>

const upload = (file) => {

fetch(“INSERT YOUR URL HERE”,
{
method: ‘PUT’,
headers: {“Content-Type”: " image/png"},
body: file,
redirect: ‘follow’
}
)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log(‘error’, error));

};

// Event handler executed when a file is selected
const onSelectFile = (evt) => {
upload(evt.target.files[0])};

// Add a listener on your input
document.getElementById(‘files’).addEventListener(‘change’, onSelectFile, false);

<a /script>

Do we just add the script within the actual HTML element?

Also, do we need to load anything else in order for the script to work?

Thanks for your assistance!

Anyone worked this out yet?

The Adobe API requires a binary upload for PDFs.

A pretty popular API service if working with docs, but can’t use it because of this limitation…

Same problem here!

You can run this JS with the toolbox plugin, worked for me!

const remoteFileUrl = ‘xxx.com/....pdf’; // Replace with the URL of the remote file
const signedUploadUrl = ‘endpointtoupload.com/upload’; // Replace with your actual signed upload URL

// Step 1: Download the file from the remote URL
fetch(remoteFileUrl)
.then((response) => {
if (!response.ok) {
throw new Error(‘Failed to download file’);
}
return response.blob(); // Get the downloaded file as a Blob
})
.then((blob) => {
// Step 2: Upload the downloaded file
fetch(signedUploadUrl, {
method: ‘PUT’,
body: blob,
})
.then((uploadResponse) => {
if (!uploadResponse.ok) {
throw new Error(‘Upload failed’);
}
console.log(‘File uploaded successfully’);
})
.catch((uploadError) => {
console.error(‘Error uploading file:’, uploadError);
});
})
.catch((error) => {
console.error(‘Error downloading file:’, error);
});