@uploadfile/react

Set UPLOADFILE_TOKEN on the server. Tokens from https://staging.uploadfile.dev use staging; tokens from https://www.uploadfile.dev use production. The SDK picks the address from the token.

Tokens issued before version 0.2.0 count as production. Staging users need to copy a fresh token from the staging dashboard.

Learn more: uploadfile.dev/docs

Examples

Components V1

// Name is temp
import { UploadButton } from "@uploadfile/react";

import type { FileRouter } from "./someUploadRouter";

export const SomePage = () => {
  return (
    <UploadButton<FileRouter>
      endpoint="someTypesafeEndpoint"
      onNewFileDropped={(file) => {
        console.log("new file added by user", file);
      }}
      onClientStartedUpload={(file) => {
        console.log("new file added by user", file);
      }}
      onClientFinishedUpload={(file) => {
        console.log(file);
      }}
    />
  );
};

Components V2

// Name is temp
import { UploadFileView, UploadProvider, UploadZone } from "@uploadfile/react";

import type { FileRouter } from "./someUploadRouter";

export const SomePage = () => {
  return (
    <UploadProvider<FileRouter>
      endpoint="someTypesafeEndpoint"
      onUpload={(file) => {
        console.log(file);
      }}
    >
      <div>Whatever You Want</div>
      <UploadZone>
        <div>Drop files here (you can style this yourself)</div>
      </UploadZone>
      <UploadFileView />
    </UploadProvider>
  );
};