How do i store images/files

Hi there,

I’ve been using React Native Fetch Blob for downloading images and storing them to be used throughout my app, i’ve since moved to and tried to use it on Expo but i get errors like RNFetchBlob.DocumentDir is undefined and etc.

Then i tried using React Native FS which also produces the same sort of error

Which library or how do i store images/files with expo?

1 Like

I’d recommend taking a look at the Asset docs, specifically Asset.downloadAsync. Let us know if that doesn’t work for you?

alright i’ll try that out, thanks

Are there examples of how to use it?
No idea where to put the URL

import Expo from ‘expo’

Expo.Asset.downloadAsync(url)?

This was how i was doing it before

let imageLocation = roomImageDir+'roomImg-'+roomId;

	RNFetchBlob.fs.isDir(roomImageDir)
	.then((isDir) => {
		if(isDir === false) {
			RNFetchBlob.fs.mkdir(roomImageDir)
			.catch((err) => {
				// do nothing
				// console.log(err)
			})
		}
	})
	

	return (dispatch) => {
		dispatch(requestRoomImage(roomId))

		RNFetchBlob.fs.exists(imageLocation)
		.then((exists) => {
			if (exists)
			{
				pImage = 'file://' + imageLocation
				dispatch(receiveRoomImage(roomId,pImage))
			}
			else
			{
				return RNFetchBlob.config({
						appendExt: 'jpg',
					})
				.fetch('GET', 'https://theapiurl/getimage/'+roomId)
				.then((res) => { 

					let pImage = ''
					if(res.data) {
						RNFetchBlob.fs.writeFile(imageLocation, res.data, 'base64')	
						pImage = 'file://' + imageLocation
					}
					dispatch(receiveRoomImage(roomId,pImage))
				})
			}
		})
		
	}

Well just to reply myself, i just did a Image.prefetch instead thinking i dont really need to specify where i save the image

let imageURL = 'https://mysite.com/getroomimg/'+roomId
return (dispatch) => {
        dispatch(requestRoomImage(roomId))
        Image.prefetch(imageURL)
        .then( () => {
	       dispatch(receiveRoomImage(roomId,imageURL))
        })
}

I have same question regarding downloading but for video… i have videos each with size of more than 5MB so before play i want to download those videos to local storage so definitly i want to show some progress bar to users. as we can;t integrate RNFS or RNFETCHBLOB with expo… question is can we get progress of downloading with expo assets way?

Try this one!! It works with expo@v25 and I’m using it in my project.

Hi everyone.
I have a question in using https://www.npmjs.com/package/rn-fetch-blob.
According to above doc, have to set native setting but in expo can’t set native setting.
How can use rn-fech-blob module in expo?
Thanks in advance

you don’t need to use that library. see FileSystem - Expo Documentation

Hi @notbrent.
Thanks for your reply. I am going to save image from image picker.
I used downloadAsync function like as follow:

const image = await ImagePicker.launchCameraAsync({
  allowsEditing: true,
  aspect: [16, 9],
  quality: 1,
});

let localUri = image.uri;
let localUriNamePart = localUri.split('/');
const fileName = localUriNamePart[localUriNamePart.length - 1];

await FileSystem.downloadAsync(image.uri, dir_path + "/" + fileName)
.then(({ uri }) => {
    console.log('Finished downloading to ', uri);
    
})
.catch(error => {
    console.error(error);
});

Take picture from camera and save it to local. It works on ios well but on android there is an error. It says only provide http:// or http:// as a url on android. I add the error screen.
How to save image file from image picker?
Thanks for your advance.

hey there! you could use copyAsync instead of download because the file will already be on your local filesystem but in a temporary directory

1 Like

Thanks for your help. You saved my time.
Thank you very much. :+1:

Could you advance me for my other issue?