diff --git a/packages/frontend/src/components/json_import.tsx b/packages/frontend/src/components/json_import.tsx index 132fffb5..7b9917da 100644 --- a/packages/frontend/src/components/json_import.tsx +++ b/packages/frontend/src/components/json_import.tsx @@ -9,7 +9,7 @@ interface JsonImportProps { export const JsonImport = (props: JsonImportProps) => { const [error, setError] = createSignal(null); - const [pasteValue, setPasteValue] = createSignal(""); + const [importValue, setImportValue] = createSignal(""); const handleError = (e: unknown) => { setError(e instanceof Error ? e.message : "Unknown error occurred"); @@ -17,7 +17,6 @@ export const JsonImport = (props: JsonImportProps) => { const validateAndImport = (jsonString: string) => { try { - // Parse JSON const data = JSON.parse(jsonString); // Run custom validation if provided @@ -32,7 +31,7 @@ export const JsonImport = (props: JsonImportProps) => { // Clear any previous errors and import setError(null); props.onImport(data); - setPasteValue(""); // Clear paste area after successful import + setImportValue(""); // Clear paste area after successful import } catch (e) { handleError(e); } @@ -41,43 +40,41 @@ export const JsonImport = (props: JsonImportProps) => { // Handle file upload const handleFileUpload = async (event: Event) => { const input = event.target as HTMLInputElement; - if (!input.files?.length) return; - try { - const file = input.files[0]; + const file = input.files?.[0]; + if (!file) return; - // Validate file type - if (!(file?.type === "application/json") && !file?.name.endsWith(".json")) { - throw new Error("Please upload a JSON file"); - } + // Validate file type + if (file.type !== "application/json" && !file.name.endsWith(".json")) { + setError("Please upload a JSON file"); + return; + } - const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB - if (file.size > MAX_FILE_SIZE) { - throw new Error("File size exceeds 5MB limit"); - } + const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB + if (file.size > MAX_FILE_SIZE) { + setError("File size exceeds 5MB limit"); + return; + } - const text = await file?.text(); - validateAndImport(text); + const text = await file.text(); + validateAndImport(text); - // Reset file input - input.value = ""; - } catch (e) { - handleError(e); - } + // Reset file input + input.value = ""; }; // Handle paste - const handlePaste = () => { - if (!pasteValue().trim()) { + const handleTextareaSubmit = () => { + if (!importValue().trim()) { setError("Please enter some JSON"); return; } - validateAndImport(pasteValue()); + validateAndImport(importValue()); }; const handleInput = (event: Event) => { const textarea = event.target as HTMLTextAreaElement; - setPasteValue(textarea.value); + setImportValue(textarea.value); }; return ( @@ -92,12 +89,12 @@ export const JsonImport = (props: JsonImportProps) => {