[Resolved] Sending images to and getting images from Bubble to Dropsource - Edited


#1

Hi @sue, i’m trying to recreate the Photo Saving app and something doesn’t add up with regards to saving and displaying the images.
In the collection page you display the images using the image url.
But in the Upload Photo page you sent a base64 encoded string of the image.
Am i missing something. If the image is being saved as a base64 encoded string why are we retrieving it with a url.

EDIT:
For anyone who may have similar concern like above here is the answer i figured out myself.
Since in the example app the image was being saved into a bubble database, they were following the process of saving images in bubble database.
Bubble allow you to upload files on S3 by doing the following :

  1. Files and Images: When a parameter is a file or image, you have two ways to define the content in the request. You can submit a string, which should be the URL of the file/image hosted on a storage service, or you can provide the raw data and the API call will upload the content to Bubble’s hosting services. In the later case, the value provided should be a JSON object as follows:

    {
    filename: String
    contents: Base64-encoded binary data
    private: Boolean
    attach_to: String
    }

where:
– filename is the file name. Optional, but recommended to get the file type.
– contents is the base64-encoded binary data of the file. Required.
– private is a boolean, true/false, that defines whether the file is protected and attached to an object in the database. See Privacy rules for more information. Optional.
– attach_to is the unique ID of who/which thing owns the file. Required if private is true.

So in the example Photo Saver app, that is the reason why the photo was been sent using the filename and contents parameters.
The confusion here is that when you just create your api endpoints in bubble and export your swagger (json file) image fields will just be string parameter field.
This means you will have to manually edit your swager file so that the image parameter is an object with at least the fields, filename and content.
Note that anytime you update your api and endpoints in bubble and export you will have to manually fix this again.

I wish Dropsource will have mentioned this in their Photo Saver app page. Took me some time to figure realized this.
For more info on saving data to bubble see the reference page here:


Steps for uploading an image to Bubble backend( In short)
Updating User Profile with Bubble Backend-400 error
#2

Hi @seanhoots and @emmanuel

After a little bit of trial and error I got to the same conclusion. @emmanuel if our troubleshooting is right, would it be possible for you to edit the meta/swagger.json so that the definition for files is correct in the first place?

Kind Regards
Mario


#3

I was just coming onto the forum to ask a similar question. Following the tutorials here I created only two endpoint workflows from bubble, that was Login and Signup (each with an “email” key and a “password” key) .

Should I create additional endpoint workflows for other data types?

For example do I need to create an API workflow Endpoint for sending photos back to my bubble database with its own key and type? Or are having a Login and Signup Endpoint the only necessary API workflows?

In my specific example I’m trying to allow the dropsource app to send an announcement consisting of a subject text field and a message body text field to an announcement page using the POST api function with a string data type, but I’m not having any success. I was wondering if its because I didn’t have the endpoint setup in Bubble?


#4

Hey @mariob,
yes i totally agree with you. It will be great if there was an option in bubble that allow you to generate image fields as {filename: String, contents: Base64-encoded binaray data}. Currently it’s really frustrating because anytime you make changes to your bubble app data or api endpoints you have to manually edit the swagger file to make this change.

Btw it’s nice to see @emmanuel is in this forum. I didn’t know and i was going to make this post on the bubble forum.

Also again @Dropsource should explain this clearly in their Photo Saver app pages because it can really be confusing if you’re not aware of this.


#5

I think I was able to find my own answer here:

Bubble API Reference

Workflow API
The Workflow API lets you run workflows on a POST request. By using such endpoints, you can create things, sign users up, send emails, and leverage plugins to access external services. Define the workflows as you would for a normal page, action by action. Some actions are not available in this context, such as element-driven actions. Such an endpoint can return data, but for Read API calls, please use the GET API.

You can create API workflows/endpoints after checking the box ‘This app exposes a Workflow API’ in the API section in the Settings Tab. These workflows are defined in the API Workflow page found in the Application Menu above the Palette

So basically I think I will have to create a new endpoint workflow.


#6

Hey @jparker,

You dont necessarily have to create a new workflow endpoint for all your data.
The swagger file bubble generates already have endpoints for all your Things. So out of the box you have GET, POST, PUT and DELETE api endpoints for all your Things.
So in your case if you have say a Thing called Announcement with fields subject and body, bubble will already generate endpoints such as POST /obj/announcement with your subject and body in the body parameters of the endpoint.

You create workflow endpoint for running workflows. In order words if all you want is to send and get data to and from your bubble app without any processing or running actions then you don’t need to create any workflow endpoints.
But to perform actions, like login, logout, signup or run some workflow in your backend, you will have to create a workflow endpoint for it.

Let me give you a practical example. Currently as you may know Dropsource doesn’t support calculations. But i my application i needed to perform some calculation on some field before saving it. So in this case instead of using the out-of-box POST obj/mything endpoint, i created a workflow endpoint say which basically recieved the values from dropsource, performed the calculation on the field before creating the thing in my bubble database.

Hope this is clear.


#7

Thanks for explaining.

Was I wrong for thinking that I needed to create an Announcement Endpoint with a workflow that created a new “Thing” with that thing being an announcement? In the endpoint I created a key called subject and a key called message both as text data types, and then in the first action under the endpoint I did a “Create a new Announcement” where I specified my message = message key and subject = subject key.

As you mentioned, I did notice that there was already a POST /obj/announcement existing in the API but when I was unable to actually send any data to my bubble database that way I figured it might have been a workflow issue. The Photo App tutorial didn’t really show how the bubble api workflows were setup so I’m just troubleshooting right now. I haven’t finished attempting to try what I’ve described in this post.

If I manually add an announcement to my bubble database, I have no trouble getting it to show in my Dropsource app. But when I try to post a new announcement from the app I’m not seeing it show up in my bubble database. I’m about to re-follow the photo app tutorial again and see if I’m missing something.


#8

The above workflow enpoint may be similar to the POST /obj/announcement. The only difference creating a workflow endpoint to create a thing like this, is that it gives you the freedom to perform workflow actions before or after creating the thing in bubble. For example you may want to send a notification when a new thing thing has been created.

But if you all you want is to create a new thing, then both option will be the same.

Yep, that was the main reason for this post. In your case i will recommend just trying to get your announcement working and hold on to the photo app for now because currently if i’m not wrong, you will have to manually edit the swagger spec generated by bubble to get the image field to work.


#9

Understood. @seanhoots Thanks for taking to the time to explain!


#10

One other important difference between using the POST obj/mything versus creating a workflow endpiont is that all the non-workflow endpoints require authentication.
But for your own workflow endpoint you can decide not to require authentication and even not follow the privacy rules.


#11

Ahh I see, That’s a very useful tip. This community is really helping me get up to speed fast. This is day 3 for me using Dropsource and I’m loving the progress I’m making. Wouldn’t be anywhere near as far along without the great documention, two awesome forums, and awesome people like yourself helping out.


#12

Hi @jparker,

you need to create an API Workflow in Bubble and declare it as public, from the API Workflow page (where you normally choose the pages).

Then you’ll need to to edit the swagger.json file so that instead of a string it takes and object with the content and filename fields as described here Bubble API reference. Scroll down to Files and you’ll find more details.

Now you can import or update the API definition in Dropsource.

Please let me know if you need more help.

Regards
Mario


#13

Thank you @mariob , so I took a screenshot because I think this will be helpful for others going forward. I put the photo-save-api.json file next to my own .json file to compare them and find out where to add the filename and content fields as @seanhoots mentioned.

I copied my own .json file from https://appname.bubbleapps.io/api/1.1/meta/swagger.json into a notepad.txt file so I could edit and re-upload it as a .json file again.

Here is my screenshot with my file on the left and the photo-save file on the right. I’m going to copy whats on the right to my own document and see if I have any luck. I’ll let you know if I have any luck.

After I copied the the appropriate text to my document this is what I had:

I’m about to re-upload my .json file and I’ll let you all know how it goes.


Steps for uploading an image to Bubble backend( In short)
#14

Hmm… So I was able to successfully add the contents and filename fields under “picture” in my POST/wf/post-picture PARAMETERS area

I can’t TEST now though due to an error regarding the picture property.

The error reads:

The property picture in the body for route POST /wf/post-picture on page Capture has been assigned an invalid value

Here’s my screen.

Here are the settings for the picture contents and filename:

I’m taking a closer look but do you all have any idea why this error is showing up? I’m following the photo-save tutorial pretty much click for click. I’m using my own bubble back-end though. I created a endpoint for posting pictures so it would match the way it was done in the tutorial.


#15

I’m guessing the issue may be coming from the actions for encoding the image and saving the base64 encoded string to the img_str variable. Check those steps well.


#16

ok. I’m taking a look now. Thanks for the suggestion.

[EDIT] I checked both the img_str variable and also the process of encoding the variable into base64String. Everything seems to look fine here though (For anyone else this part is covered in the photo app tutorial at 34:12). I’ll keep working with it.


#17

I’ve noticed that it doesn’t matter what I put in contents or filename I still get the error. Even if I clear my selections for a data source all together. The error doesn’t change. I’m thinking the error may lie elsewhere but I’m not sure where that might be yet. I double checked my JSON file and the only difference is that I call my picture “picture” and the tutorial json files calls it “pic”. I don’t think that should have anything to do with it though.


#18

Hi

the image flow is as follows:

gallery or camera image -> Asset property of Image Element -> Base64 Encode -> img_str

It looks like you’re trying to assing a string to and image, hence the error.

HTH
Mario


#19

Hi @seanhoots

I’m now trying to apply some security to uploaded image.

I’ve unchecked the “This endpoint can be run without authentication” and the endpoint stops working.

Any clues for that? Do I need to update the API definition for authentication?

[EDITED] YES! :slight_smile: In order to perform authentication, the ‘paths’ definition must not contain the empty ‘security’ object.

Kind regards
Mario


#20

Hi Mario, could you clarify what you mean? I understand what you’re saying about assigning a string to an image but I’m trying to understand the image flow you posted.

I’ve been racking my brain over here trying all kinds of things and getting no where.

I encoded the image, then set the img_str page variable to the encoded base64string, then ran the api request to post it. Is that not the right thing to do?

[EDIT] I was able to get the error to go away. I didn’t change any of my setting though. Instead I deleted the api POST function and then added it back. Seems to have been a glitch. Still not actually posting but at least the error is gone.