feat: Add support for user uploaded files (#2100)

* feat: add user file upload support for bookmarks

Add a new "user-uploaded" asset type that allows users to upload and
attach their own files to bookmarks from the attachment box in the
bookmark preview page.

Changes:
- Add USER_UPLOADED asset type to database schema
- Add userUploaded to zAssetTypesSchema for type safety
- Update attachment permissions to allow attaching/detaching user files
- Add fileName field to asset schema for displaying custom filenames
- Add "Upload File" button in AttachmentBox component
- Display actual filename for user-uploaded files
- Allow any file type for user uploads (respects existing upload limits)
- Add Upload icon for user-uploaded files

Fixes #1863 related asset attachment improvements

* fix: ensure fileName is returned and remove edit button for user uploads

- Fix attachAsset mutation to fetch and return complete asset with fileName
  instead of just returning the input (which lacks fileName)
- Remove replace/edit button for user-uploaded files - users can only
  delete and re-upload instead
- This ensures the filename displays correctly in the UI immediately
  after upload

Fixes fileName propagation issue for user-uploaded assets

* fix asset file name

* remove filename from attach asset api

---------

Co-authored-by: Claude <[email protected]>

Author: MohamedBassem

apps/web/components/dashboard/preview/AttachmentBox.tsx

@@ -101,43 +101,52 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
               prefetch={false}
             >
               {ASSET_TYPE_TO_ICON[asset.assetType]}
-              <p>{humanFriendlyNameForAssertType(asset.assetType)}</p>
+              <p>
+                {asset.assetType === "userUploaded" && asset.fileName
+                  ? asset.fileName
+                  : humanFriendlyNameForAssertType(asset.assetType)}
+              </p>
             </Link>
             <div className="flex gap-2">
               <Link
                 title="Download"
                 target="_blank"
                 href={getAssetUrl(asset.id)}
                 className="flex items-center gap-1"
-                download={humanFriendlyNameForAssertType(asset.assetType)}
+                download={
+                  asset.assetType === "userUploaded" && asset.fileName
+                    ? asset.fileName
+                    : humanFriendlyNameForAssertType(asset.assetType)
+                }
                 prefetch={false}
               >
                 <Download className="size-4" />
               </Link>
-              {isAllowedToAttachAsset(asset.assetType) && (
-                <FilePickerButton
-                  title="Replace"
-                  loading={isReplacing}
-                  accept=".jgp,.JPG,.jpeg,.png,.webp"
-                  multiple={false}
-                  variant="none"
-                  size="none"
-                  className="flex items-center gap-2"
-                  onFileSelect={(file) =>
-                    uploadAsset(file, {
-                      onSuccess: (resp) => {
-                        replaceAsset({
-                          bookmarkId: bookmark.id,
-                          oldAssetId: asset.id,
-                          newAssetId: resp.assetId,
-                        });
-                      },
-                    })
-                  }
-                >
-                  <Pencil className="size-4" />
-                </FilePickerButton>
-              )}
+              {isAllowedToAttachAsset(asset.assetType) &&
+                asset.assetType !== "userUploaded" && (
+                  <FilePickerButton
+                    title="Replace"
+                    loading={isReplacing}
+                    accept=".jgp,.JPG,.jpeg,.png,.webp"
+                    multiple={false}
+                    variant="none"
+                    size="none"
+                    className="flex items-center gap-2"
+                    onFileSelect={(file) =>
+                      uploadAsset(file, {
+                        onSuccess: (resp) => {
+                          replaceAsset({
+                            bookmarkId: bookmark.id,
+                            oldAssetId: asset.id,
+                            newAssetId: resp.assetId,
+                          });
+                        },
+                      })
+                    }
+                  >
+                    <Pencil className="size-4" />
+                  </FilePickerButton>
+                )}
               {isAllowedToDetachAsset(asset.assetType) && (
                 <ActionConfirmingDialog
                   title="Delete Attachment?"
@@ -194,6 +203,30 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
               Attach a Banner
             </FilePickerButton>
           )}
+        <FilePickerButton
+          title="Upload File"
+          loading={isAttaching}
+          multiple={false}
+          variant="ghost"
+          size="none"
+          className="flex w-full items-center justify-center gap-2"
+          onFileSelect={(file) =>
+            uploadAsset(file, {
+              onSuccess: (resp) => {
+                attachAsset({
+                  bookmarkId: bookmark.id,
+                  asset: {
+                    id: resp.assetId,
+                    assetType: "userUploaded",
+                  },
+                });
+              },
+            })
+          }
+        >
+          <Plus className="size-4" />
+          Upload File
+        </FilePickerButton>
       </CollapsibleContent>
     </Collapsible>
   );

apps/web/lib/attachments.tsx

@@ -4,6 +4,7 @@ import {
   FileCode,
   Image,
   Paperclip,
+  Upload,
   Video,
 } from "lucide-react";
 
@@ -18,5 +19,6 @@ export const ASSET_TYPE_TO_ICON: Record<ZAssetType, React.ReactNode> = {
   video: <Video className="size-4" />,
   bookmarkAsset: <Paperclip className="size-4" />,
   linkHtmlContent: <FileCode className="size-4" />,
+  userUploaded: <Upload className="size-4" />,
   unknown: <Paperclip className="size-4" />,
 };

packages/db/schema.ts

@@ -228,6 +228,7 @@ export const enum AssetTypes {
   LINK_VIDEO = "linkVideo",
   LINK_HTML_CONTENT = "linkHtmlContent",
   BOOKMARK_ASSET = "bookmarkAsset",
+  USER_UPLOADED = "userUploaded",
   UNKNOWN = "unknown",
 }
 
@@ -246,6 +247,7 @@ export const assets = sqliteTable(
         AssetTypes.LINK_VIDEO,
         AssetTypes.LINK_HTML_CONTENT,
         AssetTypes.BOOKMARK_ASSET,
+        AssetTypes.USER_UPLOADED,
         AssetTypes.UNKNOWN,
       ],
     }).notNull(),

packages/open-api/karakeep-openapi-spec.json

@@ -317,8 +317,13 @@
                     "video",
                     "bookmarkAsset",
                     "precrawledArchive",
+                    "userUploaded",
                     "unknown"
                   ]
+                },
+                "fileName": {
+                  "type": "string",
+                  "nullable": true
                 }
               },
               "required": [
@@ -1703,6 +1708,7 @@
                       "video",
                       "bookmarkAsset",
                       "precrawledArchive",
+                      "userUploaded",
                       "unknown"
                     ]
                   }
@@ -1737,8 +1743,13 @@
                         "video",
                         "bookmarkAsset",
                         "precrawledArchive",
+                        "userUploaded",
                         "unknown"
                       ]
+                    },
+                    "fileName": {
+                      "type": "string",
+                      "nullable": true
                     }
                   },
                   "required": [

packages/open-api/lib/bookmarks.ts

@@ -6,6 +6,7 @@ import { z } from "zod";
 
 import {
   zAssetSchema,
+  zAssetTypesSchema,
   zBareBookmarkSchema,
   zManipulatedTagSchema,
   zNewBookmarkRequestSchema,
@@ -418,7 +419,10 @@ registry.registerPath({
       description: "The asset to attach",
       content: {
         "application/json": {
-          schema: zAssetSchema,
+          schema: z.object({
+            id: z.string(),
+            assetType: zAssetTypesSchema,
+          }),
         },
       },
     },

packages/shared/types/bookmarks.ts

@@ -24,13 +24,15 @@ export const zAssetTypesSchema = z.enum([
   "video",
   "bookmarkAsset",
   "precrawledArchive",
+  "userUploaded",
   "unknown",
 ]);
 export type ZAssetType = z.infer<typeof zAssetTypesSchema>;
 
 export const zAssetSchema = z.object({
   id: z.string(),
   assetType: zAssetTypesSchema,
+  fileName: z.string().nullish(),
 });
 
 export const zBookmarkedLinkSchema = z.object({

packages/trpc/lib/attachments.ts

@@ -16,6 +16,7 @@ export function mapDBAssetTypeToUserType(assetType: AssetTypes): ZAssetType {
     [AssetTypes.LINK_VIDEO]: "video",
     [AssetTypes.LINK_HTML_CONTENT]: "linkHtmlContent",
     [AssetTypes.BOOKMARK_ASSET]: "bookmarkAsset",
+    [AssetTypes.USER_UPLOADED]: "userUploaded",
     [AssetTypes.UNKNOWN]: "bannerImage",
   };
   return map[assetType];
@@ -33,6 +34,7 @@ export function mapSchemaAssetTypeToDB(
     video: AssetTypes.LINK_VIDEO,
     bookmarkAsset: AssetTypes.BOOKMARK_ASSET,
     linkHtmlContent: AssetTypes.LINK_HTML_CONTENT,
+    userUploaded: AssetTypes.USER_UPLOADED,
     unknown: AssetTypes.UNKNOWN,
   };
   return map[assetType];
@@ -48,6 +50,7 @@ export function humanFriendlyNameForAssertType(type: ZAssetType) {
     video: "Video",
     bookmarkAsset: "Bookmark Asset",
     linkHtmlContent: "HTML Content",
+    userUploaded: "User Uploaded File",
     unknown: "Unknown",
   };
   return map[type];
@@ -63,6 +66,7 @@ export function isAllowedToAttachAsset(type: ZAssetType) {
     video: true,
     bookmarkAsset: false,
     linkHtmlContent: false,
+    userUploaded: true,
     unknown: false,
   };
   return map[type];
@@ -78,6 +82,7 @@ export function isAllowedToDetachAsset(type: ZAssetType) {
     video: true,
     bookmarkAsset: false,
     linkHtmlContent: false,
+    userUploaded: true,
     unknown: false,
   };
   return map[type];

packages/trpc/models/bookmarks.ts

@@ -295,6 +295,7 @@ export class Bookmark implements PrivacyAware {
           acc[bookmarkId].assets.push({
             id: row.assets.id,
             assetType: mapDBAssetTypeToUserType(row.assets.assetType),
+            fileName: row.assets.fileName,
           });
         }
 

packages/trpc/routers/assets.ts

@@ -99,7 +99,10 @@ export const assetsAppRouter = router({
     .input(
       z.object({
         bookmarkId: z.string(),
-        asset: zAssetSchema,
+        asset: z.object({
+          id: z.string(),
+          assetType: zAssetTypesSchema,
+        }),
       }),
     )
     .output(zAssetSchema)
@@ -112,16 +115,22 @@ export const assetsAppRouter = router({
           message: "You can't attach this type of asset",
         });
       }
-      await ctx.db
+      const [updatedAsset] = await ctx.db
         .update(assets)
         .set({
           assetType: mapSchemaAssetTypeToDB(input.asset.assetType),
           bookmarkId: input.bookmarkId,
         })
         .where(
           and(eq(assets.id, input.asset.id), eq(assets.userId, ctx.user.id)),
-        );
-      return input.asset;
+        )
+        .returning();
+
+      return {
+        id: updatedAsset.id,
+        assetType: mapDBAssetTypeToUserType(updatedAsset.assetType),
+        fileName: updatedAsset.fileName,
+      };
     }),
   replaceAsset: authedProcedure
     .input(

packages/trpc/routers/bookmarks.ts

@@ -253,6 +253,7 @@ async function toZodSchema(
     assets: assets.map((a) => ({
       id: a.id,
       assetType: mapDBAssetTypeToUserType(a.assetType),
+      fileName: a.fileName,
     })),
     ...rest,
   };