\n Upload CSV\n

\n \n \n \n

\n\n {/* Body */}\n

\n {/* File Input */}\n

\n \n CSV File\n \n \n

\n\n {/* Table Name */}\n {fileName && (\n

\n \n Table Name\n \n setTableName(e.target.value)}\n placeholder=\"my_table\"\n className=\"w-full px-3 py-2 rounded-lg border border-sand-300 dark:border-slate-600\n bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-200\n text-sm font-mono\n focus:outline-none focus:ring-2 focus:ring-warm-500 dark:focus:ring-warm-400\n placeholder:text-sand-400 dark:placeholder:text-slate-500\"\n />\n

\n )}\n\n {/* Drop if exists */}\n {fileName && (\n \n setDropIfExists(e.target.checked)}\n className=\"rounded border-sand-300 dark:border-slate-600 text-warm-500 focus:ring-warm-500\"\n />\n Drop table if it already exists\n \n )}\n\n {/* Parse Error */}\n {parseError && (\n

\n {parseError}\n

\n )}\n\n {/* Preview */}\n {hasData && (\n

\n Preview ({rows.length} row{rows.length !== 1 ? \"s\" : \"\"}, {columns.length} column{columns.length !== 1 ? \"s\" : \"\"})\n

\n \n \n \n {columns.map((col, i) => (\n \n {col}\n \n ))}\n \n \n \n {previewRows.map((row, ri) => (\n \n {columns.map((_, ci) => (\n \n {row[ci] ?? \"\"}\n \n ))}\n \n ))}\n \n

\n {rows.length > PREVIEW_ROWS && (\n

\n ... and {rows.length - PREVIEW_ROWS} more row{rows.length - PREVIEW_ROWS !== 1 ? \"s\" : \"\"}\n

\n )}\n

\n )}\n\n {/* Upload Error */}\n {uploadError && (\n

\n {uploadError}\n

\n )}\n

\n\n {/* Footer */}\n

\n \n Cancel\n \n \n {isUploading ? \"Uploading...\" : \"Upload\"}\n \n

\n );\n}\n","deleted","label",[181,182,164],"frontend","components","permalink","https://www.val.town/x/hobbs/sqliteExplorerReact/code/frontend/components/CsvUploadModal.tsx","extension","actionData","errors"]