Change appgyver auth avatar

Yeah, the inputs are:

Get upload URLs: [outputs["Pick image from library"].imageFile]
Upload files: outputs["Get bucket upload URLs"].files
Get download URLs: outputs["Upload files"].files

From your logic flow above, it’s not necessary to have a create record to store the storageKey permanently in S3?

Hi, S3 will recognize the storageKey once you’ve created it using Upload files. However, you’ll want to use a Create Record flow to save the storageKey in your own database so you can fetch the image when the app starts up again. In my logic flow, I’m saving the key first to a page variable, that gets created as a record after another button is tapped, that’s why there is no Create Record flow on this canvas.

Thanks for helping Mari. I’ll update you if it works and sorry for asking a lot of questions. Quick question, what value do I assigned to the app variable?

No worries! Which app variable are you referring to? If you mean the storageKey, you get it with outputs["Get bucket upload URLs"].files[0].storageKey if it’s a single image that you’re uploading.

Hi Mari… so I managed to upload the storageKey in my database(as shown in the picture below). Now how do I get the picture to display? I tried to link the image componet to the field which contains the storageKey but doesnt work

The scheme for the storageKey is called "attachment’’

Cool! To get the download URL that you can then use to display the image in the component, use Get bucket download URLs flow function. The input for that has to be a list of objects with a storageKey property:

[{storageKey: ...}, {storageKey: ...}]

So if you have an attachment with a storage key field, you can use a formula to replace “…” with your storage key, e.g. with current.attachment.

If you have several storageKeys you need download URLs for in a list type data variable and the storageKey is in the attachment field, you can use MAP(data.myList, {storageKey: item.attachment}) in a Get bucket download URLs node on the page logic canvas to get URLs for all images at once.

Where do I put the “Get bucket download URLs” ? I placed it exactly as you did in that example that you sent to me but the difference is that pictures are uploaded on a different page and displayed on another page. I’m not really good in English so most of the instruction aren’t quite clear to me, my apologies.

Also if you have an example please show me

In case you want to get the URLs to available everywhere in the app, you could use an app variable to do that. So first create an app variable for a list of URLs, and whenever you use Get bucket download URLs, use Set app variable flow function after that to put the URLs in the app variable. This way you can access the URLs on all pages. :slight_smile:

Hi Mari. I’m still stuck with implementing this functionality. Do you mind having a look and might my and see where I might have gone wrong?

Hi Lincoln! If you’re talking about the logic on Home Page, looks like the nodes there are expecting output from some nodes that don’t exist anymore. Maybe go through the nodes once more?

Oh I changed the structure on the homepage it no longer uploads images. The page which I’m working on is called “Add new events”. when you tap the container with the text “upload images” then it picks images

then to Display the images I have a page called “Events” which should get the StorageKey and Url to show the image


what i am struggling with is to retrieve the storagekey and the url to display the image

Hi, you are setting the storage key to app variable Event_Attachment but when the user clicks Save you are referring to event_att which no longer exists, I think this is where it’s going wrong:

image

Event_Attachment is also a list of texts so it cannot be bound to the attachment property, it should probably be just a text for it to work.

Nice app btw! :slight_smile:

Thank you Mari :smiley:
I changed it to Event_attachment and made it a text as shown below and the storage key is uploaded on my database but I still cant see the images uploaded on the events page


Hi, I created a new test event and now it looks like the storageKey is saved correctly (seen in the debugger State tab):

image

However you still need to use Get bucket download URLs to get the temporary URL for each image to show it. This is a little bit tricky if you have several images, because you need to get the URL for every one of them.

I created a new app variable called Event_image_URLs that is at first a list of the event ID’s and their storageKeys. You’ll need to pass the list of storage keys into Get bucket download URLs to get the image URLs. Then you can match the URLs to the event objects.

image

How do I go about doing this part?

Maybe it’s actually easiest if you switch the name of Event_image_URLs to Event_image_keys and then save the output files of Get bucket download urls to another variable, let’s call it Event_image_files.

Then you can bind the image in repeat to FIND(appVars.Event_image_files, item.storageKey === current.attachment).imgUrl to find the right URL. Here are the docs in case something I just typed is incorrect :smiley:

like this?

If you check the debugger, what values is Event_images_files getting now?