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
• Create an API key

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.

   npm

   npm i @restash/restash-js
   
2. Initialize Restash uploader

   Initialize the uploader with your public API key

   lib/restash.ts

   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.

   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/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 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/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

   lib/restash.ts

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