Client
React Native
Installation
Install for Expo
npm i @uplo/react-native expo-file-systemUsage
Add a provider
// App.js
import { UploProvider } from '@uplo/react-native'
export const App = ({ children }) => {
return <UploProvider host={process.env.API_URL}>{children}</UploProvider>
}Provider options
host(required): URL of your API.mountPath = '/uploads': Path where the Uplo routes are mounted.headers: Extra headers for requests to your API, as an object or a function (can be async) that runs before each request.credentials:fetchcredentials for requests to your API.
If your upload route needs authentication (see Hono
or Fastify), pass the token with headers:
<UploProvider
host={process.env.API_URL}
headers={async () => ({ Authorization: `Bearer ${await SecureStore.getItemAsync('token')}` })}
>
{children}
</UploProvider>credentials is passed to fetch as well.
These options are only used for requests to your API. Files are uploaded to storage with the headers your API returns, so tokens are not sent to the storage provider.
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 = () => {
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>
)
}Metadata
Pass metadata with the file to store it with the blob:
await uploadFile({ ...result, metadata: { caption: 'Profile photo' } })It is stored as blob.metadata.client, apart from metadata written on the
server, and is not trusted. See Metadata for limits.
width and height of the picked file are added to it automatically.