\n Drop your CSV file here or click to browse\n

\n CSV files will be automatically converted to database tables\n

\n {file && (\n

\n Selected: {file.name} ({(file.size / 1024).toFixed(1)} KB)\n

\n )}\n

\n\n {\n const selectedFile = e.target.files?.[0];\n if (selectedFile) handleFileSelect(selectedFile);\n }}\n className=\"hidden\"\n />\n\n {/* Table Name Input */}\n {file && (\n

\n \n Table Name\n \n setTableName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Enter table name\"\n />\n

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

Preview

\n {preview.headers.length} columns detected\n

\n\n {/* Column Types */}\n

\n Detected Column Types:\n

\n {preview.headers.map((header, index) => (\n \n {header}\n \n ({preview.inferredTypes[header]})\n \n

\n ))}\n

\n\n {/* Data Preview */}\n

\n \n \n \n {preview.headers.map((header, index) => (\n \n {header}\n \n ))}\n \n \n \n {preview.rows.map((row, rowIndex) => (\n \n {row.map((cell, cellIndex) => (\n \n ))}\n \n ))}\n \n

\n {cell \|\| —}\n

\n \n )}\n\n {/* Upload Button */}\n {file && tableName && (\n

\n \n {uploading ? \"⏳ Uploading...\" : \"🚀 Create Table\"}\n \n

\n )}\n\n {/* Messages */}\n {message && (\n \n {message.text}\n \n )}\n \n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/nbbaier/csv-upload/code/frontend/components/FileUploader.tsx","extension","actionData","errors"]