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:

​
Install and initialize the Restash uploader

1

Install

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

npm i @restash/client
2

Initialize Restash uploader

Initialize the uploader with your public API key

lib/restash.ts
import { createRestashUploader } from "@restash/client";

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

Use the uploader

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

import { upload } from "@/lib/restash";

​
Uploading your first file

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

my-form.tsx
"use client";

import { upload } from "@/lib/restash";
import type { UploadResult } from "@restash/client";
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 page and enforce signatures.

2

Create an endpoint to generate signatures

Generate signatures using the generateSig function with your secret key.

/api/restash/signature/route.ts
import { NextResponse } from "next/server";
import { generateSig } from "@restash/client";

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

lib/restash.ts
import { createRestashUploader } from "@restash/client";

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 and explore advanced features like custom paths, upload progress tracking, and more.