Uploads and image delivery in Next.js with Dreep

DREEP_API_KEY=drp_live_xxxxx
# Only needed if you serve assets from signed folders
DREEP_SIGNING_SECRET=xxxxx

import "server-only";
import { Dreep } from "dreep";

export const dreep = new Dreep({
  apiKey: process.env.DREEP_API_KEY!,
  signingSecret: process.env.DREEP_SIGNING_SECRET,
});

import { NextResponse } from "next/server";
import { dreep } from "@/lib/dreep";
import { getCurrentUser } from "@/lib/auth"; // your auth
import { db } from "@/lib/db";

const ALLOWED_TYPES = ["image/jpeg", "image/png", "image/webp", "image/heic"];
const MAX_BYTES = 20 * 1024 * 1024;

export const POST = async (request: Request) => {
  const user = await getCurrentUser();
  if (!user) {
    return NextResponse.json({ error: "Unauthorised" }, { status: 401 });
  }

  const { filename, contentType, sizeBytes } = await request.json();
  if (!ALLOWED_TYPES.includes(contentType) || sizeBytes > MAX_BYTES) {
    return NextResponse.json({ error: "File not allowed" }, { status: 400 });
  }

  const upload = await dreep.presignUpload({
    filename,
    contentType,
    sizeBytes,
    folder: `users/${user.id}`,
  });

  await db.pendingUpload.create({ data: { id: upload.id, userId: user.id } });

  return NextResponse.json({ id: upload.id, uploadUrl: upload.uploadUrl });
};

"use client";

import { useState } from "react";
import { confirmPhoto } from "@/app/actions/confirmPhoto";

const putWithProgress = (url: string, file: File, onProgress: (n: number) => void) =>
  new Promise<void>((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("PUT", url);
    xhr.setRequestHeader("Content-Type", file.type);
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) onProgress(Math.round((e.loaded / e.total) * 100));
    };
    xhr.onload = () => (xhr.status < 300 ? resolve() : reject(new Error(`PUT ${xhr.status}`)));
    xhr.onerror = () => reject(new Error("Network error"));
    xhr.send(file);
  });

const PhotoUploader = () => {
  const [progress, setProgress] = useState(0);

  const onChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const res = await fetch("/api/uploads/presign", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ filename: file.name, contentType: file.type, sizeBytes: file.size }),
    });
    const { id, uploadUrl } = await res.json();

    await putWithProgress(uploadUrl, file, setProgress);
    await confirmPhoto(id);
  };

  return (
    <label>
      <input type="file" accept="image/*" onChange={onChange} />
      <progress value={progress} max={100} />
    </label>
  );
};

export default PhotoUploader;

"use server";

import { dreep } from "@/lib/dreep";
import { getCurrentUser } from "@/lib/auth";
import { db } from "@/lib/db";

export const confirmPhoto = async (id: string) => {
  const user = await getCurrentUser();
  const pending = await db.pendingUpload.findUnique({ where: { id } });
  if (!user || pending?.userId !== user.id) throw new Error("Not your upload");

  const asset = await dreep.confirmUpload({ id });

  await db.photo.create({
    data: { userId: user.id, assetId: asset.id, url: asset.url, width: asset.width, height: asset.height },
  });
};

"use client";

import type { ImageLoaderProps } from "next/image";

const dreepLoader = ({ src, width, quality }: ImageLoaderProps) => {
  const url = new URL(src);
  url.searchParams.set("width", String(width));
  url.searchParams.set("quality", String(quality ?? 80));
  url.searchParams.set("format", "webp");
  return url.toString();
};

export default dreepLoader;

// next.config.ts
// images: { loader: "custom", loaderFile: "./lib/dreepLoader.ts" }

import Image from "next/image";
import { db } from "@/lib/db";

const PhotoPage = async ({ params }: { params: Promise<{ id: string }> }) => {
  const { id } = await params;
  const photo = await db.photo.findUniqueOrThrow({ where: { id } });

  return (
    <Image
      src={photo.url}
      alt=""
      width={photo.width}
      height={photo.height}
      sizes="(max-width: 768px) 100vw, 768px"
    />
  );
};

export default PhotoPage;

import Image from "next/image";
import { dreep } from "@/lib/dreep";
import { db } from "@/lib/db";

const ContractPage = async ({ params }: { params: Promise<{ id: string }> }) => {
  const { id } = await params;
  const scan = await db.scan.findUniqueOrThrow({ where: { id } });

  const src = dreep.signedUrl(
    { id: scan.assetId, url: scan.url },
    { expiresIn: 900, transform: { width: 1200, format: "webp" } },
  );

  return <Image src={src} alt="Contract scan" width={1200} height={1600} unoptimized />;
};

export default ContractPage;