@uplo/react-native

React Native hooks and provider for Uplo direct uploads.

Installation

For Expo:

npm i @uplo/react-native expo-file-system

Usage

Add a provider:

// App.js
import { UploProvider } from '@uplo/react-native'

export const App = ({ children }) => {
  return <UploProvider host={process.env.API_URL}>{children}</UploProvider>
}

Use direct upload:

import { useDirectUpload } from '@uplo/react-native'

export const Screen = () => {
  const {
    uploads,
    uploadFile,
    uploading,
    error,
    signedIds,
    clear: clearUploads,
  } = useDirectUpload('post.images', { multiple: true })

  const onAvatarSelect = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    })

    if (!result.cancelled) {
      try {
        const uploadData = await uploadFile(result)

        if (uploadData.signedId) {
          await updateCurrentUser({ avatarSignedId: uploadData.signedId })
        }
      } catch (e) {
        // Capture exception
      }
    }
  }

  return (
    <View>
      <Pressable onPress={onAvatarSelect}>
        <View>
          <Text>Select avatar</Text>
        </View>
      </Pressable>
    </View>
  )
}

Documentation

See the full docs at uplo.js.org.