feature: Add PDF support (#88)

* feature: Add PDF support

* fix: PDF feature enhancements

* fix: Freeze expo-share-intent version to prevent breaking changes

* fix: set endOfLine to auto for cross-platform development

* fix: Upgrading eslint/parser and eslint-plugin to 7.6.0 to solve the linting issues

* fix: enhancing PDF feature

* fix: Allowing null in fiename for backward compatibility

* fix: update pnpm file with pnpm 9.0.0-alpha-8

* fix:(web): PDF Preview for web

4 files changed, 38 insertions, 22 deletions

diff --git a/apps/web/app/api/assets/route.ts b/apps/web/app/api/assets/route.ts
index 0bb2f778..5b72033a 100644
--- a/apps/web/app/api/assets/route.ts
+++ b/apps/web/app/api/assets/route.ts
@@ -9,6 +9,7 @@ const SUPPORTED_ASSET_TYPES = new Set([
   "image/jpeg",
   "image/png",
   "image/webp",
+  "application/pdf",
 ]);
 
 const MAX_UPLOAD_SIZE_BYTES = serverConfig.maxAssetSizeMb * 1024 * 1024;
@@ -26,7 +27,7 @@ export async function POST(request: Request) {
     });
   }
   const formData = await request.formData();
-  const data = formData.get("image");
+  const data = formData.get("file") ?? formData.get("image");
   let buffer;
   let contentType;
   if (data instanceof File) {
@@ -46,11 +47,12 @@ export async function POST(request: Request) {
   }
 
   const assetId = crypto.randomUUID();
+  const fileName = data.name;
 
   await saveAsset({
     userId: ctx.user.id,
     assetId,
-    metadata: { contentType },
+    metadata: { contentType, fileName },
     asset: buffer,
   });
 
@@ -58,5 +60,6 @@ export async function POST(request: Request) {
     assetId,
     contentType,
     size: buffer.byteLength,
+    fileName,
   } satisfies ZUploadResponse);
 }
diff --git a/apps/web/components/dashboard/UploadDropzone.tsx b/apps/web/components/dashboard/UploadDropzone.tsx
index bd08d2cf..f6243885 100644
--- a/apps/web/components/dashboard/UploadDropzone.tsx
+++ b/apps/web/components/dashboard/UploadDropzone.tsx
@@ -29,7 +29,7 @@ function useUploadAsset({ onComplete }: { onComplete: () => void }) {
   const { mutateAsync: runUpload } = useMutation({
     mutationFn: async (file: File) => {
       const formData = new FormData();
-      formData.append("image", file);
+      formData.append("file", file);
       const resp = await fetch("/api/assets", {
         method: "POST",
         body: formData,
@@ -40,8 +40,9 @@ function useUploadAsset({ onComplete }: { onComplete: () => void }) {
       return zUploadResponseSchema.parse(await resp.json());
     },
     onSuccess: async (resp) => {
-      const assetId = resp.assetId;
-      return createBookmark({ type: "asset", assetId, assetType: "image" });
+      const assetType =
+        resp.contentType === "application/pdf" ? "pdf" : "image";
+      return createBookmark({ ...resp, type: "asset", assetType });
     },
     onError: (error, req) => {
       const err = zUploadErrorSchema.parse(JSON.parse(error.message));
diff --git a/apps/web/components/dashboard/bookmarks/AssetCard.tsx b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
index 460dbe98..8997a7e2 100644
--- a/apps/web/components/dashboard/bookmarks/AssetCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/AssetCard.tsx
@@ -59,6 +59,13 @@ export default function AssetCard({
           />
         </div>
       )}
+      {bookmarkedAsset.assetType == "pdf" && (
+        <iframe
+          title={bookmarkedAsset.assetId}
+          className="h-56 max-h-56 w-full"
+          src={`/api/assets/${bookmarkedAsset.assetId}`}
+        />
+      )}
       <div className="flex flex-col gap-y-1 overflow-hidden p-2">
         <div className="flex h-full flex-wrap gap-1 overflow-hidden">
           <TagList
diff --git a/apps/web/components/dashboard/preview/AssetContentSection.tsx b/apps/web/components/dashboard/preview/AssetContentSection.tsx
index 3fbbc519..4a025f9d 100644
--- a/apps/web/components/dashboard/preview/AssetContentSection.tsx
+++ b/apps/web/components/dashboard/preview/AssetContentSection.tsx
@@ -7,25 +7,30 @@ export function AssetContentSection({ bookmark }: { bookmark: ZBookmark }) {
     throw new Error("Invalid content type");
   }
 
-  let content;
   switch (bookmark.content.assetType) {
     case "image": {
-      switch (bookmark.content.assetType) {
-        case "image": {
-          content = (
-            <div className="relative h-full min-w-full">
-              <Image
-                alt="asset"
-                fill={true}
-                className="object-contain"
-                src={`/api/assets/${bookmark.content.assetId}`}
-              />
-            </div>
-          );
-        }
-      }
-      break;
+      return (
+        <div className="relative h-full min-w-full">
+          <Image
+            alt="asset"
+            fill={true}
+            className="object-contain"
+            src={`/api/assets/${bookmark.content.assetId}`}
+          />
+        </div>
+      );
+    }
+    case "pdf": {
+      return (
+        <iframe
+          title={bookmark.content.assetId}
+          className="h-full w-full"
+          src={`/api/assets/${bookmark.content.assetId}`}
+        />
+      );
+    }
+    default: {
+      return <div>Unsupported asset type</div>;
     }
   }
-  return content;
 }