80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
"use client";
|
|
import { createClient } from "@/utils/supabase/client";
|
|
import { CloudUpload } from "lucide-react";
|
|
|
|
export default function UploadZone({ user }: { user?: { id: string } }) {
|
|
const supabase = createClient();
|
|
|
|
const onUpload = async (file: File) => {
|
|
const uuid = crypto.randomUUID();
|
|
|
|
const { data: fileData, error: fileError } = await supabase.storage
|
|
.from("documents")
|
|
.upload(`${user!.id}/${uuid}.pdf`, file);
|
|
|
|
if (fileError) {
|
|
console.error(fileError);
|
|
return;
|
|
}
|
|
|
|
console.log("File uploaded successfully:", fileData);
|
|
|
|
const { data, error } = await supabase.from("documents").insert({
|
|
id: uuid,
|
|
file_name: file.name,
|
|
owner: user!.id,
|
|
raw_file: fileData.id,
|
|
});
|
|
|
|
if (error) {
|
|
console.error(error);
|
|
return;
|
|
}
|
|
|
|
console.log("Document inserted successfully:", data);
|
|
|
|
// process file at /dashboard/upload/process
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
formData.append("fileName", file.name);
|
|
formData.append("id", uuid);
|
|
const response = await fetch("/dashboard/upload/process", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
const result = await response.json();
|
|
console.log("File processed successfully:", result);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col gap-4 px-4 py-10">
|
|
<div className="flex items-center justify-center w-full">
|
|
<label
|
|
htmlFor="dropzone-file"
|
|
className="flex flex-col items-center justify-center w-full h-64 border-2 border-muted border-dashed rounded-lg cursor-pointer bg-muted/50"
|
|
>
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-5">
|
|
<CloudUpload className="w-10 h-10 mb-4 text-slate-400" />
|
|
<p className="mb-2 text-sm text-slate-400">
|
|
<span className="font-semibold">Click to upload</span> or drag and
|
|
drop
|
|
</p>
|
|
</div>
|
|
<input
|
|
id="dropzone-file"
|
|
type="file"
|
|
className="hidden"
|
|
accept="application/pdf"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
onUpload(file);
|
|
}
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|