Download binary media files from Meta API

[pachocastillosr]

Hi,

I am trying to save binary media files obtained through GET calls into Bubble’s database (as a normal file). How can I do this in Bubble through the API connector so that I can save the normal file in my database ?

The coding solution to the exact problem that I am facing is explained in the min 5:20 of this video.

If you’d like a more detailed explanation, here it is:

I am trying to download an media files from Meta’s API:

Docs here

I have managed to initialize the call through the API connector like this:

This is the response that I get:

In the body of the response you can see the supposed file link, this one is an example, they always take me here

. Chrome is updated, I have tried in incognito, I have tried in other browsers, none of them work.

If I do the call through postman it shows me the file correctly. Apparently, the problem is that the response that meta gives is binary, as it stated in its documentation:

How can I save this files as regular files in my database?

Any help would be appreciated. Thanks!

[tylerboodman]

Just for fun add the header Accept and do application/jsonand see if they will send a regular file, probably won’t work but try it

[pachocastillosr]

Thanks for replying! Unfortunately, it produced the same response:

[tylerboodman]

Not sure if you made any progress on this, but the documentation says you will receive the binary file in media_file, but I don’t see that in your response at all? I would change your “Data type” back to JSON and see if it sends a field for media_file at least because I don’t think you’re getting the proper response from the API

[pachocastillosr]

No progress at all unfortunately! I’ve tried with all the data types, this were the responses:

JSON:

XML

IMAGE

NUMBER AND TEXT

FILE

[tylerboodman]

Yea that response doesn’t even look like it contains what you’re looking for. One thing I noticed is it says the response will have headers with the content-type so do “Capture response headers”

But if you say it’s working in Postman, try it again there and look at the raw log of exactly what it’s sending (Also see if postman is getting a JSON response). They might be adding additional headers automatically that you don’t have in Bubble. At least see if we can get a response with the file, then the binary thing is a separate issue.

[pachocastillosr]

This are the headers that postman use:

I tried adding these (all except “Host”):

I got this response (tried with all data types and got the same):

[tylerboodman]

User-agent you can remove that’s part of Postman… maybe try without Accept-encoding… yea Meta’s API is cursed

[pachocastillosr]

Definitely man, they overcomplicate many things!

This is the response without user agent:

[pachocastillosr]

Hey @NigelG , do you think that building a server side plugin is needed for this? Happy new year, by the way…

[tylerboodman]

I still think you’re not even getting the response you’re looking for. It’s like sending what your browser would normally receive when it’s not supported or something. Hopefully Nigel can help more

[pachocastillosr]

Its definitely not the response that I should receive because the headers that I am receiving in postman are different:

My guess is that some binary decoding script request should be sent to this endpoint:

because of the “api_initialize_file” part.

And then the regular file would be returned as output. If I am not wrong, a server side plugin with the decoding script would be needed for that.

However, its very likely that I am wrong.

Hopefully there’s somebody on this forum who knows how to solve this case!

[jonah.deleseleuc]

I’ve faced this issue before. If you know a little bit of NodeJS, you should make a server side action (a plugin) that converts and returns the binary data into a base64 encoded string. From there, you can upload it to S3 or do whatever you’d like.

[tylerboodman]

I also saw this plugin by the very happy @aaronsheldon

Bubble Back End Utilities Plugin for Bubble, by Aaron Sheldon

More notably this action:

Not sure if that means you feed it a list of numbers in groups of 8, or if you can feed it a string of 1s and 0s like Meta probably sends it?

[pachocastillosr]

Hey @jonah.deleseleuc thanks for replying!

I don’t code and have never created a server side plugin, but I am trying to build it with the help of ChatGPT. This is what I got:

function(properties, context) {
  const request = require('request');
  const OggEncoder = require('OggVorbisEncoder');

  // Set the endpoint URL and the authorization header
  const endpointUrl = properties.endpoint_url;
  const authHeader = properties.authHeader;

  // Send the GET request and retrieve the binary data
  request(endpointUrl, {
    headers: {
      [authHeader]: ''
    },
    method: 'GET',
    encoding: null
  }, (error, response, body) => {
    if (error) {
      return callback(error);
    }

    // Convert the binary data to a wave object
    const wavData = WaveFile.decode(body);

    // Convert the wave object to an ogg file
    const oggData = OggEncoder.encode(wavData.channelData[0], wavData.sampleRate);

    // Set the output field for the binary data
    const output = {
      binary_data: oggData
    };

    // Return the output fields to the workflow
    callback(null, output);
  });
}


        // Return the output fields to the workflow
        callback(null, output);
      });
    }

I am getting this error when clicking on “Build failed. Try again”:

What is wrong? Is this too far from the code that I need?

[pachocastillosr]

Thanks for sharing! I guess this plugin might help after getting the appropriate response from Meta, right? Cause right know it asks me for a list of numbers but all I got is this:

[tylerboodman]

I’m not sure if that response even has your file… Postman is showing you got a “File.ogg” with the content type audio/ogg. But in the headers of the response coming back to Bubble does it even have that same filename? It looks like it’s just giving you a generic error response that it think’s Bubble’s browser is unsupported.

I was thinking once you get the actual response, then you use the plugin to convert the Binary to Base64, then the Base64 saved to your database.

[jonah.deleseleuc]

If you think you can copy & paste code from Chat GPT and expect it to work you’ve got it all wrong

There’s a reason why StackOverflow banned answers from Chat GPT. It gets things wrong all the time but talks as if it knows the answer. So beware!

[pachocastillosr]

Yes, I’ve noticed that. Nevertheless, it was worked for me for some simpler cases, I just tweak some things in the code and that’s it. However, this is a more complex case that I don’t know how to tweak .

[NigelG]

@pachocastillosr

Hey @NigelG , do you think that building a server side plugin is needed for this? Happy new year, by the way…

Happy New Year to you too

I don’t know, but it would probably be the way to go. Have never had much luck with SSPs but that was some time ago.

From memory I had the same sort of issues with uploading media files to the Twitter API.