javascript – Blobs and Recordsdata retrieved from Indexeddb on IOS are empty

Spread the love

I wish to retailer photos in IndexedDB, and I’m utilizing Dexie for it. Once I retailer a picture in IndexedDB and retrieve it instantly afterward, I can show the picture. Nevertheless, once I retailer it, then reload the web page, and subsequently retrieve it, I am unable to show it on iOS units. It does work for all of the Android and Home windows units I’ve tried.

Extra code context:

Dexie Init config: _imageDB.model(2).shops({ photos: 'id, associatedContent' });

Retailer picture: await;

Get Picture: place('associatedContent').equals(associatedContent).toArray();

A picture object appears to be like like this:

  id: 'f9ce4b59-0219-437a-a749-fde1c75d4dd7',
  identify: 'iphonetest.jpg',
  file: new File([blob], 'iphonetest.jpg'),
  associatedContent: 'take a look at',

Tried options:

I attempted a number of issues to show the retrieved information. And as I mentioned all of them work for Home windows and Android and none for ios.

I at all times attempt to show them with this img tag: <img src={image.authentic} alt={image.originalAlt} loading='lazy' />.

I attempted:

  1. Create a brand new File from the retrieved information, then creating an object url:

    const file = new File([cachedImage.file], cachedImage.identify)
    image.authentic = URL.createObjectURL(file)
  2. Create a brand new Blob from the retrieved information:

    const blob = new Blob([cachedImage.file])
    image.authentic = URL.createObjectURL(blob)
  3. Create the article url instantly from the cached picture information:

    image.authentic = URL.createObjectURL(cachedImage.file)
  4. Retailer the picture not as File however as Blob.

Up to now every strive ended with this blue questionmark field.

Tries 1 and a pair of lead to a file/blob with a measurement of 0. Once I verify the cachedImage.file.measurement I get the right 16522.

Leave a Reply

Your email address will not be published. Required fields are marked *