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 secret and app id from the UploadThing dashboard and saved them in your project environment variables.

.env

UPLOADTHING_SECRET=sk_live_xxxxxxxx
UPLOADTHING_APP_ID=xxxxx

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>

Upload files

Configure your project

The <Uploader/> component

Example of add new router for custom document upload

On this page

The `<Uploader/>` component