aboutsummaryrefslogtreecommitdiffstats
path: root/apps/web/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/components')
-rw-r--r--apps/web/components/dashboard/UploadDropzone.tsx7
-rw-r--r--apps/web/components/dashboard/bookmarks/AssetCard.tsx7
-rw-r--r--apps/web/components/dashboard/preview/AssetContentSection.tsx39
3 files changed, 33 insertions, 20 deletions
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;
}