diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx index a3779585..fe3c14e5 100644 --- a/apps/web/src/app/projects/page.tsx +++ b/apps/web/src/app/projects/page.tsx @@ -4,7 +4,7 @@ import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/navigation"; import type { KeyboardEvent, MouseEvent } from "react"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; import { toast } from "sonner"; import type { EditorCore } from "@/core"; import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog"; @@ -15,6 +15,7 @@ import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Skeleton } from "@/components/ui/skeleton"; import { useEditor } from "@/hooks/use-editor"; +import { useFileUpload } from "@/hooks/use-file-upload"; import { useProjectsStore } from "./store"; import type { TProjectMetadata, @@ -532,45 +533,37 @@ function NewProjectButton() { function ImportProjectButton() { const editor = useEditor(); const router = useRouter(); - const fileInputRef = useRef(null); - const handleImport = async (event: React.ChangeEvent) => { - const file = event.target.files?.[0]; - if (!file) return; + const { openFilePicker, fileInputProps } = useFileUpload({ + accept: ".json,.opencut.json", + multiple: false, + onFilesSelected: async (files) => { + const file = files[0]; + if (!file) return; - try { - const json = await file.text(); - const projectId = await editor.project.importProjectFromJSON({ json }); - if (projectId) { - router.push(`/editor/${projectId}`); + try { + const json = await file.text(); + const projectId = await editor.project.importProjectFromJSON({ json }); + if (projectId) { + router.push(`/editor/${projectId}`); + } + } catch (error) { + toast.error("Failed to read file", { + description: + error instanceof Error ? error.message : "Please try again", + }); } - } catch (error) { - toast.error("Failed to read file", { - description: - error instanceof Error ? error.message : "Please try again", - }); - } - - // Reset the input so the same file can be re-selected - if (fileInputRef.current) { - fileInputRef.current.value = ""; - } - }; + }, + }); return ( <> - +