natysoz / expo-images-picker

Multiple Asset Photos Videos selecting package for Expo SDK
MIT License
95 stars 35 forks source link

Image upload not working on play store. #61

Closed phemieny7 closed 1 year ago

phemieny7 commented 1 year ago

My image doesn't preview while in the production environment, everything works fine in my development and testing environment, But after I bundle the app to the play store, this feature stops working, And I guess it is not writing the file to memory.

https://user-images.githubusercontent.com/10562193/196957990-7187290e-6852-456c-a2be-6f0f9a1b4480.mp4

Here is the look while in production after building to aab for the play store

https://user-images.githubusercontent.com/10562193/196956766-9f7b2344-1827-4630-94c3-8bfe8db77cac.mp4

Here is how it suppose to be, But it works in development alone

below is the component responsible for uploading

import React, { useMemo } from 'react';
import { AssetsSelector,  } from 'expo-images-picker';
import { MediaType } from 'expo-media-library';
import { color } from "../../theme"

export interface ImageBrowserProps {
  count: number,
  close: ()=>void,
  save: (data: any)=>void,
}

/**
 * Describe your component here
 */
export const ImageBrowser = observer(function ImageBrowser(props: ImageBrowserProps) {
  const { count, close, save } = props
  const widgetErrors = useMemo(
    () => ({
      errorTextColor: 'black',
      errorMessages: {
        hasErrorWithPermissions: 'Please Allow media gallery permissions.',
        hasErrorWithLoading: 'There was an error while loading images.',
        hasErrorWithResizing: 'There was an error while loading images.',
        hasNoAssets: 'No images found.',
      },
    }),
    []
  );

  const widgetSettings = useMemo(
    () => ({
      getImageMetaData: true, // true might perform slower results but gives meta data and absolute path for ios users
      initialLoad: 100,
      assetsType: [MediaType.photo],
      minSelection: 1,
      maxSelection: count,
      portraitCols: 4,
      landscapeCols: 4,
    }),
    []
  );

  const _textStyle = {
    color: 'white',
  };

  const _buttonStyle = {
    backgroundColor: color.primary,
    borderRadius: 5,
  };

  const widgetNavigator = useMemo(
    () => ({
      Texts: {
        finish: 'finish',
        back: 'back',
        selected: 'selected',
      },
      midTextColor: 'black',
      minSelection: 1,
      buttonTextStyle: _textStyle,
      buttonStyle: _buttonStyle,
      onBack: () => {
          close()
      },
      onSuccess: (e: any) => {
          save(e)
      }
    }),
    []
  );

  const widgetStyles = useMemo(
    () => ({
      margin: 2,
      bgColor: 'white',
      spinnerColor: color.primary,
      widgetWidth: 99,
      videoIcon: {
        Component: Ionicons,
        iconName: 'ios-videocam',
        color: 'tomato',
        size: 20,
      },
      selectedIcon: {
        Component: Ionicons,
        iconName: 'ios-checkmark-circle-outline',
        color: 'white',
        bg: '#0eb14970',
        size: 26,
      },
    }),
    []
  );
  return (
      <AssetsSelector
        Settings={widgetSettings}
        Errors={widgetErrors}
        Styles={widgetStyles}
        Navigator={widgetNavigator}
      // Resize={widgetResize}
      />
  )
})`
phemieny7 commented 1 year ago

i found out that i am not using the right formData to capture the image URI, which will only work in development stage

   formData.append(`data[${i}]`, {
         uri: data[i].localUri,

to

   formData.append(`data[${i}]`, {
         uri: data[i].uri,