Save image to client side database

Hi Appgyver,

At the moment, my database is stored in an app variable when the app opens and is used throughout the app. You can save an uploaded page with text and images to a client side database that you can later access offline.

I am struggling to get an image saved to my client side database. I can save the URL file to the database but I believe I need the image file rather than just the URL file as I am not getting any images through when the app is offline?

I believe I have to use the “get bucket upload/download URL” but I don’t know how or where to incorporate it. I have pictures stored in repeat and as a single image.

Thank you as always for your help.

Dan

Hi Dan!

“Get bucket upload/download URLs” and “Upload files” flows upload images to Amazon’s servers so you can get them from there later, and this needs an internet connection. If you want to access images offline you’ll need to save them on the user’s device.

You can cache the files (save for a predetermined amount of time), or download them in the device’s filesystem. More about the filesystem here.

As a sidenote, remember to be cautious of how much stuff you store on the user’s device! Image files can be quite large in size, and there is often limited space.

Hi Mari,

Thank you for your reply and advice, much appreciated.

I am only planning on saving text and images to the device filesystem that people add to their “saved information”. Not the full database, only very specific information/downloads, the rest should only appear if the user have internet.

I have looked at your information but I still cant implement it in my app. I am unsure how to add the download flow function or mix it with the text information that is already being saved on the device filesystem.
Saving text works fine but, with the images, I am only saving the URL / https image file to the device, but this cannot be accessed offline. :pensive:

On a page in the app, a single data record from the online database (temporarily stored in an app variable) is displayed. It’s this information I want to the save on the users device, so that the user can eventually see this information when the phone is offline.

Hi Dan! The difference between files and text is that text can be stored in an object and thus easily saved on the device in a client-side database, while with images you have to save the file separately and then point to their correct filepath within the filesystem. So what you can store in your local resource is:

localItem = {text: "Lorem ipsum", filePath: "file://..."}

The steps for implementing the image download will depend on how your app works, more specifically where does the image exist, do you only know it’s URL path, or can you also access the image file as an object?

Thank you Mari, that makes so much more sense.

At the moment the picture comes to the app as long text/number: 5fd76873dcc3095300064aff and to get an image on shown in the app I add this to it:
https://browseposter-345.restdb.io/media/”.

The long text comes into the app and is first stored in a app variable where the app then finds the data and add the “https…” and my image appears :blush:

I then have a save button that will save the text and images to the client-side storage. Hope its all making sense to you.

Dan

Hi, in the Download files flow function just put the whole URL in the downloadUrl field:

The file path comes as an output of the node:

image

Thanks Mari,

I have now added this to the same image button, but I have several pictures being saved and some in repeat, can it tell these apart?

And, at the moment, I can’t get the files linked to the same id as the text already being saved.

You’ll have to implement the Download files flow for each of the images you want to save.

One way is to first put all of the objects you want to save locally in a list, and then make a loop on the logic canvas that adds a file path to each object using the output of Download files.

Hi @Mari

Thank you once again for helping me with this. I have had some success :grinning: but I still having problems with pictures saved in repeat.

I have managed to get single pictures saved using the download file ad saving the file path and not the URL.

Not sure how to tackle the repeat issue, getting the file for each picture saved to the client-side database and then displaying them in repeat again.

Your advice and experience is as always much appreciated and highly valued. :blush:

Dan

Hi @Mari

I am still not able to solve the repeat issue. Getting the file for each picture saved to the client-side database and then displaying them in repeat again :pensive:

I think I have tried everything. Do you have any advice on how to solve this.

Dan

Hi Dan, apologies for forgetting to follow up on this thread! You’ll need to create a logic loop for this, where you download the files one by one.

  1. Have all the images you want to upload in a list variable
  2. Take the first item [0] from the list, do the download operations for it
  3. Remove the item from the list using e.g. REMOVE_ITEMS_AT
  4. Repeat steps 2) and 3) until the list is empty

Hi Mari,

Thank you for your reply, much appreciated :blush:

I now have the images in a list variable. I can also see in debugger, I can get a single item from that using [0] or [1], and I can get it to download function to download that file. Not sure how to add the loop and where to put that formula.

Also, do you know how I would get the files put together in a list again, so I can save them to the client-side storage and then see them in repeat again. I can only save 1 file at the moment. :thinking:

Thank you Mari for your help.

Dan

Hi, alright… what’s the formula exactly that isn’t working right now? :slight_smile:

I have the list in ImageList as a string and I can download a single Image file fine and get it stored in DownloadedImageList but cant get the rest of the pictures and I cant get them put back into a list :pensive:

Screen Shot 2021-04-16 at 11.45.09

Screen Shot 2021-04-16 at 11.44.45

Hi, you can connect a node back to another to execute the same logic multiple times, here is a “pseudo” implementation (not functional but you see the required formulas):

image

This loop will first check if imageList is empty. If it’s not, 2nd output of the If condition node will be triggered: it downloads the first item and then removes it from imageList. Then it checks (again) if there are images left. If yes, it does the same thing again. If the IS_EMPTY condition evaluates to true, it goes to the 1st output and alerts that the list is empty.

Hope this clarified! :slight_smile:

Hi Mari,

Yes this makes so much sense. The loop seems to work in debugger (At the moment I can’t get any pictures through the app), but as I download each picture I only get 1 file/path as the output. How do I get them all back together again in a list of pictures, that I can use in repeat?

The last 2 weeks my pictures from my database are not showing in the appgyver app, do you know why?

Thank you for all your help.

Dan

Hi, you can do that by creating another list type variable for the paths, and adding a Set variable node in between the Download and REMOVE_ITEMS_AT nodes, which adds the output of the Download node to the list with WITH_ITEM :slight_smile:

Hmm I’m not aware of any known issues with images not showing, what kind of logic are you using there?

Thank you so much Mari, I will work on that today :blush:

My images are not showing up anymore in the Appgyver app or Appgyver Legend.

Images are stored in an external database and have been coming through fine but stopped 2 weeks ago. The debugger is showing that information is still coming through as you can in the ImageList

I use the https://browseposter-3f5b.restdb.io/media/ and then attaches the image string to it, like this: 605e7c0ca7282517000316a3. That has been producing the image but not anymore.

Dan

Okay, if you put in that URL in the browser are you able to see the image (just to know the problem is not with the backend)? Which view component are you using to display the images?

Yes if I put the URL into google, the picture appears.

If I put the same URL into a picture box in the project, the picture will show up on the computer but still nothing in any of the apps.
If I close the project down, the picture wont always appear again when I open the project. :pensive: