How to upload an image and get it's url to an input field?

[friendly424234]

I want my users to be possible to upload pictures to use in my meeting editor, too.
In the finished app, the users can input an image url into an input field that is stored in appgyver cloud and then used to show an image in the meetinglist container
Here they can input the link/url

and when it’s saved with save button, it’s stored and used there

but sometimes if you create a picture by yourself it’s not so easy to store it online and get a link to use it here.
I want to create a button next to the image-url input field which opens a modal window where you are able to choose of the already uploaded images or upload a new one. If you click on a picture it closes the modal and inserts the url of the choosen image into the input field.
I hope you understand what i mean

this is what i’ve done yet with the file upload tutorial, but i do not understand the other steps there and i think it’s maybe a bit outdated because my AppGyverCloudStorage window don’t look like that in the tutorial and in the tutorial “subject” is an extra area from the other points of images and at mine all are from images. so i don’t know if i done it right.

[Sasu_Makinen]

Note that if you’re using the S3 storage way of storing images the download URLs are TEMPORARY and valid only for 15 minutes.

What you need to do is save to storageKey as this is persistant and with this you can generate new download urls whenever you want.

[friendly424234]

ok, i didn’t know that. Could you tell me how to do the same thing but with the storagekey?
I have absolutely no idea how to do.

[Sasu_Makinen]

You can just save the storageKey to any data record and it’s there to be used later. Not sure if I’m misunderstanding something of your issue .

[friendly424234]

The Problem is that i don’t know how to get this storageKey and the other things i maybe need.
And if i got it, i don’t know how to show the uploaded images in my Image Gallery.

And then i want that the url or whatever i need is set into this on previus page (the gallery is an opened modal from the previous page)

@friendly424234

and then if it is set into this it should be stored in data variable for my meetinglist. (saving is already implemented) And i don’t know how to get this.

[Sasu_Makinen]

the get upload url flow function generates you a storageKey which can be accessed from the output of that flow function.

and you can use get download url whenever with this storageKey to get access to the image

[friendly424234]

But if i use an image for the meeting list, it will be away after 15min and not be there until i delete it, right?

[Sasu_Makinen]

You can always generate a new url for the image when you open the page or app.

[friendly424234]

so i am at this point now:

do i have to change anything here? Because in the docs it says

Add an image component and make it repeat based on the NewImageGallery.images array, and bind the Source property to current.path

But if i trie to do this it says it’s incompatible. All of them are incompatible, so i can’t choose one to repeat. Also images itself.

[Sasu_Makinen]

I’d suggest you just upload it straight away and just store the storageKey

[friendly424234]

The problem is that i don’t know how. The tutorial in the docs is a bit outdated and it’s not completed and misses some example pictures i think.
So as you said i only need the storage key. all other data isn’t neccessary, e.g. mimeType, name, path, downloadUrl, subject?
How do i get the storageKey? Could you maybe give me a short tutorial / example what flow functions, etc. i need?
Maybe like this: Upload Icon > component tap–pick files–… or with images
or sth else. So that i understand what i need to do. At this time i don’t know what to do and what i need.

[Sasu_Makinen]

outputs["Get bucket upload URLs"].files.storageKey

[friendly424234]

I’ve changed a bit to upload directly how you’ve said.

On which of them do i have to put that formula outputs["Get bucket upload URLs"].files.storageKey?
And do i have to add a value here or don’t i need to do anything?

[Sasu_Makinen]

You need to upload the files you picked previously. Set the binding to output of pick files. Also use the storageKey in your create record.

[friendly424234]

so i’ve done this. changed “files” of get bucket upload urls to output of pick files

and changed “files” of Upload files to formula outputs["Get bucket upload URLs"].files.storageKey

do i have to put outputs["Get bucket upload URLs"].files.storageKey also in create record / record properties / storageKey (change storage key to formula of that)

[Sasu_Makinen]

You want to upload the whole files object not the storageKey… But the storageKey is the only thing NEED to save to the database (i.e. create record) for the image to be accessible in the future.

So get upload urls for the files and upload the files and save storageKey and whatever other information you want to the database.

[friendly424234]

so i changed this

I think that worked. Only the storage key is stored.

But now the question is how to get the image shown

[Sasu_Makinen]

Get download url flow function

[friendly424234]

i have an image component. where do i have to set this get bucket download URLs flow function?
And what do i have to do in this flow function?

[Sasu_Makinen]

apparently it asks other information about the files with the storageKey so you might want to save all the other information as well. ( I don’t think this is required though!)