Upload files

Configure and integrate file upload functionality in your Application.

iOS
Web
Android

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.

.env
UPLOADTHING_TOKEN=xxxxxxxxxxxx

The <Uploader/> component

you all set, you can find example of upload user profile avatar :

AvatarUploader.tsx
 
<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

/packages/api/upload/routes.ts
 
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:

DocumentUploader.tsx
<Uploader endpoint="documentUploader" asChild>
  <View>
    <Text>Upload PDF</Text>
  </View>
</Uploader>

Previous

Emails

Next

AI Wrapper

On this page