Storing images with filesystem XMLHttpRequest


I am in the process of developing an image cache for my capacitor apps.

I have opted to use Capacitor’s Storage plugin as the cache system, and the filesystem to store the images themselves.

I download the image using the following call:

download(url: string) {
var xhr = new XMLHttpRequest();
xhr.responseType = ‘blob’;
xhr.onload = function(event) {
var blob = xhr.response;
};‘GET’, url);

I then need to store the image to the file system which currently accepts a string as data. I am unsure of he best approach to take here to store the image, so that I can then simply refer t the image location URI later to avoid a network call.

What is the best approach to take to store the image correctly? Convert the blob to a base64?

1 Like