# Vite, React Router & others (/docs/frameworks/react)



The client packages have no framework dependencies. In a Vite or React Router app:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @uploadcn/file-upload
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @uploadcn/file-upload
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @uploadcn/file-upload
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @uploadcn/file-upload
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Point the adapter at your backend:

```tsx
import { s3Adapter } from "@uploadcn/core"

import { FileUpload } from "@/components/file-upload"

const adapter = s3Adapter({ endpoint: "https://api.example.com/upload", credentials: "include" })

export function App() {
  return <FileUpload adapter={adapter} />
}
```

## Backends [#backends]

`createUploadRoute` returns a `(request: Request) => Promise<Response>` handler, which
fits any Web-standard server:

<Tabs items="[&#x22;Hono&#x22;, &#x22;Cloudflare Workers&#x22;, &#x22;Bun&#x22;, &#x22;Express&#x22;]">
  <Tab value="Hono">
    ```ts
    import { Hono } from "hono"

    const app = new Hono()
    app.post("/api/upload", (c) => upload.POST(c.req.raw))
    ```
  </Tab>

  <Tab value="Cloudflare Workers">
    ```ts
    export default {
      fetch(request: Request) {
        const url = new URL(request.url)
        if (url.pathname === "/api/upload") return upload.POST(request)
        return new Response("Not found", { status: 404 })
      },
    }
    ```
  </Tab>

  <Tab value="Bun">
    ```ts
    Bun.serve({
      routes: { "/api/upload": { POST: (request) => upload.POST(request) } },
    })
    ```
  </Tab>

  <Tab value="Express">
    ```ts
    import express from "express"

    const app = express()
    app.post("/api/upload", express.json(), async (req, res) => {
      const response = await upload.POST(
        new Request(`http://localhost${req.url}`, {
          method: "POST",
          headers: { "content-type": "application/json", authorization: req.get("authorization") ?? "" },
          body: JSON.stringify(req.body),
        })
      )
      res.status(response.status).json(await response.json())
    })
    ```
  </Tab>
</Tabs>

Not using JavaScript on the server? Implement the [route protocol](/docs/reference/server#protocol)
in any language; it's one JSON endpoint.