How to cache images for offline use in Kodular?

[OK_Yt]

Hi everyone,
I’m using Kodular with Spreadsheet/Airtable.
I already load images online using image URLs and Dynamic_Image.
Now I want to implement real image caching:
once an image is loaded, it should be available offline.
I tried using TinyDB and Web.DownloadFile to save images locally,
but my logic is not working yet.
I attached my blocks screenshots below.

Could anyone guide me on how to properly cache images for offline use?
Thank you in advance.strong text

[RaYzZz (Gianluca Franco)]

HI dear,

Welcome to the odular community!

There are several extensions that can make your work easier, the main ones are these.

[F/OS] Image Loader - Extension for image loading and caching

Image Loader Hi everyone, Today I present a new extension based on Universal Image Loader that allows you to load and cache images. Demo Event OnLoadingStarted: Event when the loading of the image is started. The url returns the URL of the image. [OnLoadingStarted] OnLoadingFailed: Event when the image is failed to load. The url returns the URL of the image. [OnLoadingFailed] OnLoadingComplete: Event when the image is loaded. The url returns the URL of the image. [OnLoadingComple…

Picasso: Extension to load images with efficiency of Picasso

1.Introduction Description: Extension to load images with Picasso Latest Version: 2.1 Released: 2021-03-08T18:30:00Z (UTC) Last Updated: 2024-06-30T18:30:00Z (UTC) 2.Blocks [image] [image] 3.Usages The extension can be used with any view component. A good example will be this: [image] If you want to resize image then make sure you provide both, height and width. Delete cache if you want to load fresh image [image] 4.Source Code You can find the source code at the Github repo: …

[FREE] Async Image Loader Extension - Simple asynchronous image loader with circular image

[photo] AsyncImage Simple asynchronous image loader extension to load image asynchronously in an image or arrangement component with circular image. This is a simple and light weight extension since it does not uses any external library to load images. See the extension documentation on AI2 Community:

As for doing this with native blocks, you just need to create a dictionary in TinyDB with the image URL as the key and the image itself as the value.
When you request an image from a URL, you first check whether it’s present in the dictionary, if it is, you load it from TinyDB, if not, you download it.

[OK_Yt]

Thank you so much for your help.

I am a beginner and I still don’t fully understand how to build the blocks for image caching with TinyDB and Web.

Could you please share a simple blocks screenshot example?
It would really help me to understand how to connect the blocks correctly.

Thank you very much.

[Ibrahim_Jamar]

@OK_Yt

blocks for image caching with TinyDB and Web.

Where will your data stored? We have a lot of databases you can take a look here and choose if u haven’t

https://community.kodular.io/search?q=Database%20%23guides

[RaYzZz (Gianluca Franco)]

SimpleTinyDBCache.aia (6.4 KB)

This is a very simple example of how to cache images using native components.

I’d like to point out that using an extension is much easier, but nothing prevents us from using this method

As you can see, I have a list of URLs that corresponds to what you receive in GotColumn.
When Button1 is pressed, we loop through the entire list, create the DynamicImages, and use the loadCachedImage function.
This function checks whether the image is present in cache dictionary variable, if it isn’t, it downloads it using the Web component.

I also created some functions to clear the cache if needed.

Note that the cached files will be downloaded into the My Documents/Downloads folder inside the main directory (we could do something more professional by moving the data to another folder, but to avoid overcomplicating things, I preferred to leave them there).