> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.restash.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Client uploads

> Learn how to upload files directly from the browser to Restash.

Easily upload files directly from the browser with Restash.
This guide shows you how to set up client-side uploads using our lightweight SDK.

## Prerequisites

To follow this guide, you will need to:

* [Create a Restash account](https://restash.io/register)
* [Create an API key](https://restash.io/api-keys)

## Install and initialize the Restash uploader

**1. Install**

Install the Restash JS client SDK using your preferred package manager. Restash works with all Javascript front end
frameworks.

```bash npm theme={null}
npm i @restash/restash-js
```

```bash pnpm theme={null}
pnpm i @restash/restash-js
```

```bash yarn theme={null}
yarn add @restash/restash-js
```

**2. Initialize Restash uploader**

Initialize the uploader with your **public API key**

```javascript lib/restash.ts theme={null}
import { createRestashUploader } from "@restash/restash-js";

export const upload = createRestashUploader({
  publicKey: "pk_123456789"
});
```

**3. Use the uploader**

You can now import the uploader and use it to upload files.

```javascript theme={null}
import { upload } from "@/lib/restash";
```

## Uploading your first file

In this example, we will upload a file in Next.js

```typescript my-form.tsx theme={null}
"use client";

import { upload } from "@/lib/restash";
import type { UploadResult } from "@restash/restash-js";
import { useState, FormEvent } from "react";

export const ImageUploader = () => {
  const [newFile, setNewFile] = useState<UploadResult | null>(null);

  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const formData = new FormData(e.currentTarget);

    if (!formData.has("file")) {
      throw new Error("No file selected");
    }

    const file = formData.get("file") as File;

    const uploadedFile = await upload(file);
    setNewFile(uploadedFile);
  };

  return (
    <>
      <h1>Upload an image</h1>
      <form onSubmit={onSubmit}>
        <input name="file" type="file" required accept="image/*" />
        <button type="submit">Upload</button>
      </form>
      {newFile && (
        <img src={newFile.url} alt={newFile.name} />
      )}
    </>
  );
};
```

## Signed uploads

Enabling signed uploads for your team ensures that only your server can authorize uploads by requiring a secure signature for each request. This prevents abuse and gives you full control over who can upload.

## Implementing signed uploads

**1. Require signed uploads for your team**

Navigate to your [team settings](https://restash.io/settings) page and enforce signatures.

**2. Create an endpoint to generate signatures**

Generate signatures using the `generateSig` function with your **secret key**.

```typescript /api/restash/signature/route.ts theme={null}
import { NextResponse } from "next/server";
import { generateSig } from "@restash/restash-js";

export const GET = () => {
  const secret = process.env.RESTASH_SECRET_KEY!;
  const { signature, payload } = generateSig(secret);

  return NextResponse.json({ signature, payload });
}
```

**3. Pass your endpoint the uploader**

Pass your route to `createRestashUploader`

```typescript lib/restash.ts theme={null}
import { createRestashUploader } from "@restash/restash-js";

export const upload = createRestashUploader({
  publicKey: "pk_123456789",
  handleSignature: "/api/restash/signature"
});
```

## Next steps

You're now ready to start uploading files with Restash!
Check out the full [client SDK](https://documentation.restash.io/sdks/client-side.md) and explore advanced features like custom paths, upload progress tracking, and more.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.