Offline cache image isn't download the image from the same Url

[qdevelopergithub]

Hi, i am using offline image cache storage to store images offline but i am facing an issue that is the library isn't able to download the image from the same url which is stored already in the cache.

For example:- https://images.graph.cool/v1/cji4f30yf6uwx0119va5jp226/cjio9y0ny7sat0161stutdvts/800x600
This is the url and when i call the offline image store again to download and store it in the offline that is not stored even i cleared the offline image cache.

Please give the solution.

[Jayasagar]

Hi,

Can you try re-fetch the image by specifying 'reloadImage={true}'. Irrespective of the image already being stored offline, this way you can refresh/load the most recently updated images.

Please let us know if it helps.

[qdevelopergithub]

The problem is not in the loading of the offline stored image but when we download it by using preload from the url.

[BHesseldieck]

Hi,

Does it show the fallback image or does it show any errors in the console?

Could you provide more information so we can help you more efficiently?

Also, please check potential CORS issues.

[qdevelopergithub]

This is my .js class where i am using offline image store, It calculates the total number of urls and then bind them into an array after that it downloads all of the images from the array. Then we are showing the downloading process in the text by dispatching an action. When we run the code for the very first time it works fine but second time. It stuck at some point and the downloading text also shows the stopped downloading. Check the following code :-

import ImgToBase64 from 'react-native-image-base64'
import R from 'ramda'
import _ from 'lodash'
import { PermissionsAndroid, Platform } from 'react-native'
import { OfflineImageStore } from 'react-native-image-offline'
import { START_DOWNLOADING_TRIP_PHOTOS, SET_IMAGES_TOTAL, SET_IMAGES_COUNTER, SET_IMAGES_SUCCESS, SET_IMAGES_ERROR } from '../constants'

import { openDatabase } from 'react-native-sqlite-storage';
var db = openDatabase({ name: 'UserDatabase.db' });

async function requestStorage() {
  try {
    return await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, {
      title: 'GetTrip.guru storage permission',
      message: 'To download files we need storage write permission :)'
    })
  } catch (err) {
    console.warn(err)
  }
}

function checkStoragePermission() {
  try {
    return PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE).then(res => res)
  } catch (err) {
    console.warn(err)
  }
}

const getUrls = trip => {
  const res = []

  res.push(`${_.get(trip, 'tripDetails.coverPhoto.url', '').replace('//files.', '//images.')}/800x600`)
  res.push(
    trip.tripDetails.itineraryDays.map(day =>
      day.contentEvents.map(event => [
        ...event.photos.map(photo => `${_.get(photo, 'url', '').replace('//files.', '//images.')}/800x600`),
        `${_.get(event, 'defaultPhoto.url', '').replace('//files.', '//images.')}/800x600`
      ])
    )
  )
  return _.uniq(R.flatten(res))
}


export const getTripPhotos = trip => (dispatch, getState) => {
  const state = getState()
  const URLsAmount = getUrls(trip).length

  if (state.ImageReduce[trip.id] && state.ImageReduce[trip.id].success) {
    return
  }

  if (Platform.OS == 'ios') {
    OfflineImageStore.restore(
      {
        name: 'Trippere_Cache',
        imageRemoveTimeout: 99999999999
        // debugMode: true
      },
      () => {
        let counter = 0
        let failed = 0
        // Callback function
        // console.log('Restore completed and callback called !')
        dispatch({ type: START_DOWNLOADING_TRIP_PHOTOS, payload: { id: trip.id } })
        OfflineImageStore.preLoad(getUrls(trip), response => {
          if (response.err) failed++
          counter++
          if (parseInt(counter / URLsAmount * 100) === 100) {

            return dispatch({ type: SET_IMAGES_SUCCESS, payload: { id: trip.id } })
          }
          if (parseInt(counter / URLsAmount * 100) % 20 === 0)
            dispatch({ type: SET_IMAGES_COUNTER, payload: { id: trip.id, progressCounter: parseInt(counter / URLsAmount * 100) } })
          // console.log('HOW MANY:', counter / getUrls(trip).length * 100, 'LENGTH;', getUrls(trip).length, 'counter', counter)
          // console.log('FAILED:', failed)
        })
          .then(() => console.log('Completed!!!!!!!!!11'))
          .catch(err => console.warn(err))
      }
    )
      .then(() =>
        OfflineImageStore.restore(
          {
            name: 'Trippere_Cache'
            // debugMode: true
          },
          () => {
            let counter = 0
            let failed = 0
            // Callback function
            // console.log('Restore completed and callback called !')
            dispatch({ type: START_DOWNLOADING_TRIP_PHOTOS, payload: { id: trip.id } })
            OfflineImageStore.preLoad(getUrls(trip), response => {
              if (response.err) failed++
              counter++
              if (parseInt(counter / URLsAmount * 100) === 100) {

                return dispatch({ type: SET_IMAGES_SUCCESS, payload: { id: trip.id } })
              }
              if (parseInt(counter / URLsAmount * 100) % 20 === 0)
                dispatch({ type: SET_IMAGES_COUNTER, payload: { id: trip.id, progressCounter: parseInt(counter / URLsAmount * 100) } })
              // console.log('HOW MANY:', counter / getUrls(trip).length * 100, 'LENGTH;', getUrls(trip).length, 'counter', counter)
              // console.log('FAILED:', failed)
            })
              .then(() => console.log('Completed!!!!!!!!!11'))
              .catch(err => console.warn(err))
          }
        ))
  }


  if (Platform.OS !== 'ios') {
    return checkStoragePermission()
      .then(res => {
        console.log('permissions', res)
        if (!res) {
          return requestStorage()
        }
        OfflineImageStore.restore(
          {
            name: 'Trippere_Cache',
            imageRemoveTimeout: 99999999999
            // debugMode: true
          },
          () => {
            let counter = 0
            let failed = 0
            // Callback function
            // console.log('Restore completed and callback called !')
            dispatch({ type: START_DOWNLOADING_TRIP_PHOTOS, payload: { id: trip.id } })
            OfflineImageStore.preLoad(getUrls(trip), response => {
              if (response.err) failed++
              counter++
              if (parseInt(counter / URLsAmount * 100) === 100) {
                return dispatch({ type: SET_IMAGES_SUCCESS, payload: { id: trip.id } })
              }
              if (parseInt(counter / URLsAmount * 100) % 20 === 0)

                dispatch({ type: SET_IMAGES_COUNTER, payload: { id: trip.id, progressCounter: parseInt(counter / URLsAmount * 100) } })
              // console.log('HOW MANY:', counter / getUrls(trip).length * 100, 'LENGTH;', getUrls(trip).length, 'counter', counter)
              // console.log('FAILED:', failed)
            })
              .then(() => console.log('Completed!!!!!!!!!11'))
              .catch(err => console.warn(err))
          }
        )
      })
      .then(() =>
        OfflineImageStore.restore(
          {
            name: 'Trippere_Cache'
            // debugMode: true
          },
          () => {
            let counter = 0
            let failed = 0
            // Callback function
            // console.log('Restore completed and callback called !')
            dispatch({ type: START_DOWNLOADING_TRIP_PHOTOS, payload: { id: trip.id } })
            OfflineImageStore.preLoad(getUrls(trip), response => {
              if (response.err)
                failed++
              counter++
              // alert("Before condition "+"Counter "+counter+"FAILED "+failed+"URL Amounts"+ URLsAmount)
              if (parseInt(counter / URLsAmount * 100) === 100) {
                // StoreDataOffline(trip);
                // alert("%100 Counter "+counter+ "URLsAmount "+URLsAmount)
                return dispatch({ type: SET_IMAGES_SUCCESS, payload: { id: trip.id } })
              }
              if (parseInt(counter / URLsAmount * 100) % 20 === 0)
                // alert("%20 Counter "+counter+ "URLsAmount "+URLsAmount)
                dispatch({ type: SET_IMAGES_COUNTER, payload: { id: trip.id, progressCounter: parseInt(counter / URLsAmount * 100) } })
              // console.log('HOW MANY:', counter / getUrls(trip).length * 100, 'LENGTH;', getUrls(trip).length, 'counter', counter)
              // console.log('FAILED:', failed)
            })
              .then(() => console.log('Completed!!!!!!!!!11'))
              .catch(err => console.log(err))
          }
        )
      )
  }
}

[BHesseldieck]

Can you check if the problem still exists in V0.1.9?

Thank you!