0

I uploaded image from web account, this image showing on mobile as well but when I uploaded image from mobile it cannot display on web or any other mobile

Because in database web image uri is readable but mobile image uri not readable My Image Picker code

const pickImage = async () => {

      // No permissions request is necessary for launching the image library
      let result = await   ImagePicker.launchImageLibraryAsync({
          


        

        mediaTypes: ImagePicker.MediaTypeOptions.All,
       
        base64: true,
        
        
      });

Image Uploaded from web

enter image description here

image uploaded from mobile

enter image description here

1 Answers1

1

You will see that on web the uri of the file is the base64 prepended version of your base64 field.

On mobile, you will need to upload that instead of using the fileUri. To be consistent across platforms, and to avoid writing duplicate code, simply save the base64 result instead.

const { base64 } = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        base64: true, 
      });

const base64ToUpload = `data:image/jpeg;base64,${base64}`;

You should also consider determining the fileType from the file chosen, as it isn't guaranteed to be a jpeg (dependant on your implementation of course).

The reason you are experiencing an issue is because the web implementation is giving you the base64 representation of the file, but on mobile you are getting the file's location in local storage which are 2 very different things.

Phobos
  • 1,568
  • 10
  • 18
  • thank you its working I need another help I want to do firebase cloud messaging service worker with Expo React Native when message send its notification send to other devices as well –  Jan 04 '22 at 15:26
  • Phobos If you done this before please share with me How can I do this Expo cloud messaging –  Jan 04 '22 at 15:27
  • Expo documentation is pretty solid on FCM, here is the link: https://docs.expo.dev/push-notifications/using-fcm/. There is also documentation on their site which covers the client side code. – Phobos Jan 04 '22 at 15:31
  • thank you How can I download google service.json of firebase because When I am creating Project I skipped this step –  Jan 04 '22 at 15:37
  • In Firebase Console go to Project Overview > (select android / ios app that you created under apps section) > click settings icon > scroll down and there is a 'google-services.json' or 'GoogleService-Info.plist' link that will allow you to download based on the platform you set up. – Phobos Jan 04 '22 at 15:40
  • I already created web App so it only show that what should I need to go because My web App is created and I needed google json file –  Jan 04 '22 at 16:16
  • Here only I already Created App config information present –  Jan 04 '22 at 16:17
  • Can you Please answer this Question https://stackoverflow.com/questions/70604278/how-to-get-image-url-expo-camera-image-picker-in-react-native –  Jan 06 '22 at 08:51