How do you upload Image?

[Rychillie]

I'm trying to apply an image upload system to a Supabase server, I created a whole logic for the App but when the Web Build is done it doesn't upload...

I'm using expo-image-picker, does anyone recommend an alternative?

[nandorojo]

i use expo’s successfully, but it requires some hacks on Web. I’ll share my code later

[nandorojo]

So...my code is not exactly simple here, but it is battle tested. I'm sharing this "as-is", so I can't really help with it, but I hope it's useful. The usage is like this:

  const picker = useImagePicker({
    onSuccess: async (images) => {
      if (images[0]?.base64) {
        const image = await upload(images[0].base64)
      }
    },
  })

It also adds the picked images to react state to make it easy, and lets you pass image manipulation options.

Under the hood, expo's image picker has inconsistencies for how it gives the image across platforms. This implementation is meant to always serve you a valid base64 string, so you should always rely on the base64, as shown in the example above.

import * as ImagePicker from 'expo-image-picker'
import { useState } from 'react'
import { ImageInfo } from 'expo-image-picker/build/ImagePicker.types'
import { Platform } from 'react-native'
import { useRef, useEffect } from 'react'
import * as ImageManipulator from 'expo-image-manipulator'
import { Alert } from 'react-native'
import * as Linking from 'expo-linking'

function isCancelled(
  result: ImagePicker.ImagePickerResult
): result is { cancelled: true } {
  return !!result.cancelled
}

type Image = ImageInfo & { base64: string }
type ManipulateProps = Parameters<typeof ImageManipulator['manipulateAsync']>

const MAX_SIZE = 2000

export default function useImagePicker({
  options,
  ...props
}: {
  onSuccess?: (image: Image[]) => void
  manipulate?: [ManipulateProps[1], ManipulateProps[2]] | null
  options?: ImagePicker.ImagePickerOptions
} = {}) {
  const {
    manipulate = [
      [{ resize: { width: MAX_SIZE } }],
      { base64: true, compress: 0.95 },
    ],
  } = props
  const onSuccess = useRef(props.onSuccess)
  useEffect(() => {
    onSuccess.current = props.onSuccess
  })
  const [media, setMedia] = useState<Image[] | null>(null)
  const removeMedia = (uri: string) => {
    setMedia((state) => state?.filter((image) => image.uri !== uri) ?? null)
  }
  const launchPicker = async () => {
    console.log('[use-image-picker] will launch')
    if (Platform.OS !== 'web') {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
      if (status !== 'granted') {
        Alert.alert(
          `Camera permissions required. Please enable them in your app settings.`,
          undefined,
          [
            {
              text: 'Enable',
              onPress: () => Linking.openURL('app-settings:'),
            },
            {
              text: `Don't enable`,
              style: 'destructive',
            },
          ]
        )
      }
    }
    const response = await ImagePicker.launchImageLibraryAsync({
      allowsMultipleSelection: true,
      base64: true,
      quality: 1,
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      ...options,
    })
    // console.log('[use-image-picker] launch-picker', response)
    if (!isCancelled(response)) {
      let result: Image[] = []
      // @ts-ignore
      if (response?.selected) {
        // on web, we get a selected array
        // @ts-ignore
        result.push(...response.selected)
      } else {
        result.push(response as Image)
      }
      if (manipulate) {
        console.log('[use-image-picker] will manipulate...')
        const manipulated = (
          await Promise.all(
            result.map(async (image) => {
              const maxSizeKey = image.height > image.width ? 'height' : 'width'
              // if we only have one manipulation we're performing
              if (manipulate[0]?.length === 1) {
                const sizeManipulation =
                  (manipulate[0]?.[0] as ImageManipulator.ActionResize)?.resize
                    ?.width ||
                  (manipulate[0]?.[0] as ImageManipulator.ActionResize)?.resize
                    ?.height

                console.log('[use-image-picker] manipulating...', {
                  sizeManipulation,
                })

                // if we're only manipulating size,
                // and we want it larger than our current size, skip it, no need to resize, it would only increase the size
                if (sizeManipulation && sizeManipulation >= image[maxSizeKey]) {
                  return image
                }
              }
              // if we want to edit "width", we really want "maxWidth" / "maxHeight"
              // take the "width" value and set it as the max height or width, depending on the larger one
              const updatedSizeManipulations = manipulate[0]?.map(
                (manipulation) => {
                  const sizeManipulation =
                    (manipulation as ImageManipulator.ActionResize)?.resize
                      ?.width ||
                    (manipulation as ImageManipulator.ActionResize)?.resize
                      ?.height
                  if (sizeManipulation) {
                    return {
                      resize: {
                        [maxSizeKey]: sizeManipulation,
                      },
                    } as ImageManipulator.ActionResize
                  }
                  return manipulation
                }
              )

              console.log('[image-picker] literally going to manipulate', {
                // updatedSizeManipulations,
                // props: manipulate?.[1],
                uri: image.uri,
              })

              if (Platform.OS !== 'web') {
                if (image.width > MAX_SIZE || image.height > MAX_SIZE) {
                  Alert.alert(
                    `Image too big 😬`,
                    `FYI – your image should be no larger than 2000x2000. The one you picked is ${image.width}x${image.height}. That might be okay, but if you face issues, please try with a smaller image.`
                  )
                }
                return image
                // const man = await ImageManipulator.manipulateAsync(
                //   image.uri,
                //   [{ resize: { width: 2000 } }],
                //   {
                //     format: ImageManipulator.SaveFormat.PNG,
                //   }
                //   // manipulate?.[1]
                // )

                // console.log('[native] did manipulate', man.uri)
                // return man
                // return image
              }

              const manipulation = await ImageManipulator.manipulateAsync(
                image.uri,
                updatedSizeManipulations,
                {
                  ...manipulate?.[1],
                  format:
                    image.uri.includes('image/png') ||
                    image.uri.endsWith('.png')
                      ? ImageManipulator.SaveFormat.PNG
                      : undefined,
                }
              )

              console.log('[image-picker] worked??')

              return manipulation
            })
          )
        ).filter(Boolean) as Image[]
        console.log('[use-image-picker] did manipulate image here')
        result = manipulated
      }
      console.log('[use-image-picksy]', result)
      console.log('[media-picker-screen] successss', result)
      result = result.map((image) => {
        if (image.base64) {
          return {
            ...image,
            base64: (image.base64.split(',').length > 1
              ? image.base64.split(',')[1]
              : image.base64
            ).replace(/(?:\r\n|\r|\n)/g, ''),
          }
        }

        if (Platform.OS === 'web') {
          const { uri } = image
          return {
            ...image,
            base64: (uri.split(',').length > 1
              ? uri.split(',')[1]
              : uri
            ).replace(/(?:\r\n|\r|\n)/g, ''),
          }
        }

        return image
      })
      props.onSuccess?.(result)
      setMedia(result)
      return response
    }
  }
  const resetMedia = () => setMedia(null)

  return {
    media,
    launchPicker,
    resetMedia,
    removeMedia,
  }
}

[nandorojo]

I'm also only manipulating images on Web. For some reason, it didn't work for me on native. But maybe that's fixed in newer SDKs.

[iyifr]

How do you install and use expo-image-picker in solito ?
I get this error after running yarn add expo-image-picker and adding it to next-config.js (after first encountering the error)
import { DeviceEventEmitter } from 'react-native';
^^^^^^

SyntaxError: Cannot use import statement outside a module

[nandorojo]

you need to add it to transpilePackages in next.config.js

[iyifr]

Only adding expo-image-picker to transpilePackages did not work for me though
Had to add these 3 packages -
'expo-image-picker',
'expo-image-loader',
'expo-modules-core',

[Ophelie22]

Hello, it's what also i trying to do to use vectexpo but it's don't work