1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
"use client";
import React, { useState } from "react";
import { api } from "@/lib/trpc";
import { cn } from "@/lib/utils";
import { useMutation } from "@tanstack/react-query";
import DropZone from "react-dropzone";
import {
zUploadErrorSchema,
zUploadResponseSchema,
} from "@hoarder/trpc/types/uploads";
import LoadingSpinner from "../ui/spinner";
import { toast } from "../ui/use-toast";
export default function UploadDropzone({
children,
}: {
children: React.ReactNode;
}) {
const invalidateAllBookmarks =
api.useUtils().bookmarks.getBookmarks.invalidate;
const { mutate: createBookmark, isPending: isCreating } =
api.bookmarks.createBookmark.useMutation({
onSuccess: () => {
toast({ description: "Bookmark uploaded" });
invalidateAllBookmarks();
},
onError: () => {
toast({ description: "Something went wrong", variant: "destructive" });
},
});
const { mutate: uploadAsset, isPending: isUploading } = useMutation({
mutationFn: async (file: File) => {
const formData = new FormData();
formData.append("image", file);
const resp = await fetch("/api/assets", {
method: "POST",
body: formData,
});
if (!resp.ok) {
throw new Error(await resp.text());
}
return zUploadResponseSchema.parse(await resp.json());
},
onSuccess: async (resp) => {
const assetId = resp.assetId;
createBookmark({ type: "asset", assetId, assetType: "image" });
},
onError: (error) => {
const err = zUploadErrorSchema.parse(JSON.parse(error.message));
toast({ description: err.error, variant: "destructive" });
},
});
const [isDragging, setDragging] = useState(false);
const onDrop = (acceptedFiles: File[]) => {
const file = acceptedFiles[0];
setDragging(false);
uploadAsset(file);
};
return (
<DropZone
multiple={false}
noClick
onDrop={onDrop}
onDragEnter={() => setDragging(true)}
onDragLeave={() => setDragging(false)}
>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} hidden />
<div
className={cn(
"fixed inset-0 flex h-full w-full items-center justify-center bg-gray-200 opacity-90",
isDragging || isUploading || isCreating ? undefined : "hidden",
)}
>
{isUploading || isCreating ? (
<div className="flex items-center justify-center gap-2">
<p className="text-2xl font-bold text-gray-700">Uploading</p>
<LoadingSpinner />
</div>
) : (
<p className="text-2xl font-bold text-gray-700">
Drop Your Image
</p>
)}
</div>
{children}
</div>
)}
</DropZone>
);
}
|
