Feature: Add support for uploading images and automatically inferring their tags (#2)

* feature: Experimental support for asset uploads

* feature(web): Add new bookmark type asset

* feature: Add support for automatically tagging images

* fix: Add support for image assets in preview page

* use next Image for fetching the images

* Fix auth and error codes in the route handlers

* Add support for image uploads on mobile

* Fix typing of upload requests

* Remove the ugly dragging box

* Bump mobile version to 1.3

* Change the editor card placeholder to mention uploading images

* Fix a typo

* Change ios icon for photo library

* Silence typescript error

1 files changed, 52 insertions, 0 deletions

diff --git a/apps/web/app/api/assets/route.ts b/apps/web/app/api/assets/route.ts
new file mode 100644
index 00000000..2caa4d4c
--- /dev/null
+++ b/apps/web/app/api/assets/route.ts
@@ -0,0 +1,52 @@
+import { createContextFromRequest } from "@/server/api/client";
+
+import type { ZUploadResponse } from "@hoarder/trpc/types/uploads";
+import { db } from "@hoarder/db";
+import { assets } from "@hoarder/db/schema";
+
+const SUPPORTED_ASSET_TYPES = new Set(["image/jpeg", "image/png"]);
+
+const MAX_UPLOAD_SIZE_BYTES = 4 * 1024 * 1024;
+
+export const dynamic = "force-dynamic";
+export async function POST(request: Request) {
+  const ctx = await createContextFromRequest(request);
+  if (!ctx.user) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const formData = await request.formData();
+  const data = formData.get("image");
+  let buffer;
+  let contentType;
+  if (data instanceof File) {
+    contentType = data.type;
+    if (!SUPPORTED_ASSET_TYPES.has(contentType)) {
+      return Response.json(
+        { error: "Unsupported asset type" },
+        { status: 400 },
+      );
+    }
+    if (data.size > MAX_UPLOAD_SIZE_BYTES) {
+      return Response.json({ error: "Asset is too big" }, { status: 413 });
+    }
+    buffer = Buffer.from(await data.arrayBuffer());
+  } else {
+    return Response.json({ error: "Bad request" }, { status: 400 });
+  }
+
+  const [dbRes] = await db
+    .insert(assets)
+    .values({
+      encoding: "binary",
+      contentType: contentType,
+      blob: buffer,
+      userId: ctx.user.id,
+    })
+    .returning();
+
+  return Response.json({
+    assetId: dbRes.id,
+    contentType: dbRes.contentType,
+    size: buffer.byteLength,
+  } satisfies ZUploadResponse);
+}