[Resolved] Saving/retrieving source of image user selected from image library (launchImageLibraryAsync)

[kosmic]

I need to let my users select an image from their phone image library and save it as their profile picture.

I have read the docs and am implementing ImagePicker.launchImageLibraryAsync().

I am successfully allowing the user to select the image and displaying their selected image on the screen (the most basic implementation as shown in the documentation).

My problem: I am having a hard time properly saving/retrieving the correct image data so that I can retrieve every user’s selected image on different areas of the app.

I am actually able to save/retrieve the selected images on different areas, but the issue is that the image being displayed is always the current user’s image. For example, I have a chat app and I want to display each user’s selected image next to their respective messages. But, I think due to the way I am retrieving the image data… the current user’s selected image always shows up where other user’s images should be displayed.

I am pretty certain this is an image source-related problem. I am currently saving and retrieving the image URI returned after the user selects a photo.

The URI is something like this: “uri”:“file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg”

In the docs it mentions Base64 which I think is the key to solving my issue:

Images can contain also base64 and exif keys. base64 is included if the base64 option was truthy, and is a string containing the JPEG data of the image in Base64–prepend that with ‘data:image/jpeg;base64,’ to get a data URI, which you can use as the source for an Image element for example.

I have base64 option truthy. But I am confused on the next step… what do I need to do to get the proper data URI so that I can correctly display each user’s selected image next to their chat messages, instead of only showing the current user’s selected image? I do have everything else set up in my app correctly as far as server/database/client. I just need to know how to save the URI so that it’s showing every respective user’s selected image, instead of just showing the current user’s image (probably due to me only referencing the local image file path).

Can anyone please dumb this down for me so I can get my user images working properly? Incase it matters, I’m using Mongo/Mongoose for DB, Node/Express for server

[kosmic]

Ok, I figured out how to save/retrieve the base64 data. Now I’m able to sign into different user accounts and have their respective images display in the chat messages.

Using a template literal, I save the base64 string to my DB like this:

const img = result.base64;
‘data:image/jpeg;base64,${img}’

result.base64 is the base64 string returned after setting base64: true in launchImagaeLibraryAsync() options

Now another problem though… I can sign into different user accounts on the same phone and change the profile pictures and it works fine. But I can’t do this with 2 phones. If I’m signed in as a different user on my 2nd phone and try to select/save a photo, the task does not complete. I can select the photo on 2nd phone but no processes run after initially selecting the photo. Really weird…I’ll make a separate post for this issue if I can’t figure it out.

[quinlanj]

hi @kosmic, sorry for the inconvenience you are having while developing on expo. from your description, im not sure off the top of my head what the problem could be, but it’d be really helpful if you could share a simple snack (snack.expo.io) of the problem so we can root cause it.

[kosmic]

I’ll see about creating a snack, although I’m not sure it will necessarily be considered simple since I think I’d need to recreate the user authentication, profiles, database, etc to show what’s happening. But if I absolutely can’t find the cause then I will put one together for your team to look at. Thanks for the reply.