@uploadthing/react

Learn more: docs.uploadthing.com

Examples

Components V1

1// Name is temp
2import { UploadButton } from "@uploadthing/react";
3
4import type { FileRouter } from "./someUploadRouter";
5
6export const SomePage = () => {
7  return (
8    <UploadButton<FileRouter>
9      endpoint="someTypesafeEndpoint"
10      onNewFileDropped={(file) => {
11        console.log("new file added by user", file);
12      }}
13      onClientStartedUpload={(file) => {
14        console.log("new file added by user", file);
15      }}
16      onClientFinishedUpload={(file) => {
17        console.log(file);
18      }}
19    />
20  );
21};

Components V2

1// Name is temp
2import { UploadFileView, UploadProvider, UploadZone } from "@uploadthing/react";
3
4import type { FileRouter } from "./someUploadRouter";
5
6export const SomePage = () => {
7  return (
8    <UploadProvider<FileRouter>
9      endpoint="someTypesafeEndpoint"
10      onUpload={(file) => {
11        console.log(file);
12      }}
13    >
14      <div>Whatever You Want</div>
15      <UploadZone>
16        <div>Drop files here (you can style this yourself)</div>
17      </UploadZone>
18      <UploadFileView />
19    </UploadProvider>
20  );
21};