How to preload images in client side storage DB

[Jannik_Meier]

Hi
I was looking for the best way to achieve the following:

My app should come preloaded with a number of small images that will be displayed at various points in the app based on what the user selects. The app has to be usable entirely offline.

So I was thinking I could create a new client side data resource and populate it with my image assets and then use them in page/data variables throughout my app. Unfortunately I couldn’t find a way to do that and I’m not sure it is even possible. Is there another/better way to do it?

[Mazen_Al-Sakkaf]

Hi,

You could do that by local image path.

For instance:

Create Client-side Storage called photos_db as below:

Then a data variable:

Two page variables:

Update the field of the dropdown box as below:

For Option List, you need to map as below:

You can put an image component and set its Source as below:

Take a Photo Button

Regarding Create a record node, you need to set it as the following:

ID: outputs[“Take photo”].photoFile.name
photo: outputs[“Take photo”].photoFile.path

For Page variables (photoID and photo) set thier values as above.

Delete Button

All the best

[Jannik_Meier]

Hi Mazen

Thank you very much for your detailed response.

I understand now that images that I want to bring with the app are not stored in the database but only the images that a user creates/takes during the usage of the app can be stored in the client side storage.

I don’t have any function in my app for a user to create any images and save them. I want to achieve the following:

There is a container on the page with 4 images of playing-cards. I uploaded these image assets:

When the user tabs on one of the images, the Source URL is safed to a page variable and one of the blank playing-card images underneath will display the selection:

The problem for me now is (or maybe I’m not understanding this correctly) that the image assets I uploaded have an URL-Path so it won’t be usable offline.

Is there a way so that the uploaded image assets can be stored on the users device when the app is installed? And how can I reference them in a page variable without an URL?

[Mazen_Al-Sakkaf]

You are most welcome Jannik,

I created a brand new app and added an image with a photo. After that, I export it to an android bandle (apk). Finally, I installed it on my phone and switched off the wifi.

The photo appeared!. which means the photos are stored in the app as assets.

You may give it a try.

Cheers,

[Dan]

My pictures are stored client-side and works offline too, but if I do an update to the app, they disappear, do you have same problem?

Dan

[Mazen_Al-Sakkaf]

May I know what kind of the update?

[Dan]

A new build in Appgyver and then uploaded to to appstore

[Jannik_Meier]

Thank you for testing this.

Just so that I understand this correctly: The image assets I upload are only temporarily saved at the URL path (https://appgyver-meap-assets.s3…) while building the app in appgyver and once the app is complete the image assets will be stored locally?

Don’t I have a problem then when I’m saving the URL path in a page variable (in the example above)? Can it still reference the right image asset (that will then be stored on the user device) with that page variable?