Upload files
Configure and integrate file upload functionality in your Application.
iOS
Web
Android
.env The
AvatarUploader.tsx /packages/api/upload/routes.ts DocumentUploader.tsx
ExpoStarter provides a simple way to upload files to your server using the uploadthing.
Configure your project
Go to the uploadthing dashboard and create a new app if you haven't already.
Copy your uploadthing token id from the UploadThing dashboard and saved them in your project environment variables.
UPLOADTHING_TOKEN=xxxxxxxxxxxxThe <Uploader/> component
you all set, you can find example of upload user profile avatar :
<Uploader endpoint="avatarUploader" onUploadComplete={() => utils.user.me.invalidate()} asChild>
<View>
<Text>Upload Avatar</Text>
</View>
</Uploader>Example of add new router for custom document upload
export const uploadRouter = {
documentUploader: f({
pdf: {
maxFileSize: "64MB",
maxFileCount: 1,
contentDisposition: "inline",
},
})
.middleware(async ({ req }) => {
// validate user session
const user = await validateSession(req);
if (!user) {
throw new Error("Unauthorized");
}
return { userId: user.id };
})
.onUploadComplete(async (data) => {
// you can update user record in db or do any other operation
await db
.insert(documentTable)
.values({
userId: data.userId,
documentUrl: data.file.url,
})
.execute();
}),
} satisfies FileRouter;
In React, you can then use the component with the new router documentUploader:
<Uploader endpoint="documentUploader" asChild>
<View>
<Text>Upload PDF</Text>
</View>
</Uploader>