lumina/uploader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip pt4

Browse Source
This commit is contained in:
highperfocused 2025-04-13 13:11:30 +02:00
parent 243987aa40
commit 3cdcedddaa
1 changed files with 51 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/upload-component.tsx
View File

@ -458,49 +458,63 @@ const UploadComponent = () => {
}
return (
<div className="w-full max-w-2xl mx-auto">
<div className="w-full mx-auto">
{showUploadForm ? (
<form className="space-y-4" onSubmit={onSubmit}>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="file">Upload Image</Label>
<Input id="file" name="file" type="file" accept="image/*" onChange={handleFileChange} />
</div>
<Card className="w-full">
<CardHeader>
<CardTitle>Upload Image</CardTitle>
<CardDescription>Select an image to upload to {serverChoice}</CardDescription>
</CardHeader>
<CardContent>
<form className="space-y-4" onSubmit={onSubmit}>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="file">Select File</Label>
<Input id="file" name="file" type="file" accept="image/*" onChange={handleFileChange} />
</div>
<div className="grid grid-cols-2 w-full items-center gap-1.5">
<Label htmlFor="server-select">Upload to</Label>
<Select onValueChange={handleServerChange} value={serverChoice}>
<SelectTrigger className="w-full" id="server-select">
<SelectValue placeholder={serverChoice} />
</SelectTrigger>
<SelectContent>
<SelectItem value="blossom.band">blossom.band</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid grid-cols-2 w-full items-center gap-1.5">
<Label htmlFor="server-select">Upload to</Label>
<Select onValueChange={handleServerChange} value={serverChoice}>
<SelectTrigger className="w-full" id="server-select">
<SelectValue placeholder={serverChoice} />
</SelectTrigger>
<SelectContent>
<SelectItem value="blossom.band">blossom.band</SelectItem>
</SelectContent>
</Select>
</div>
{previewUrl && (
<div className="mt-4 rounded-md overflow-hidden">
<img src={previewUrl || "/placeholder.svg"} alt="Preview" className="w-full max-h-80 object-contain" />
</div>
)}
{previewUrl && (
<div className="mt-4 rounded-md overflow-hidden">
<img
src={previewUrl || "/placeholder.svg"}
alt="Preview"
className="w-full max-h-80 object-contain"
/>
</div>
)}
{isLoading ? (
<Button className="w-full" disabled>
Uploading... <ReloadIcon className="ml-2 h-4 w-4 animate-spin" />
</Button>
) : (
<Button className="w-full" type="submit">
Upload
</Button>
)}
</form>
{isLoading ? (
<Button className="w-full" disabled>
Uploading... <ReloadIcon className="ml-2 h-4 w-4 animate-spin" />
</Button>
) : (
<Button className="w-full" type="submit">
Upload
</Button>
)}
</form>
</CardContent>
</Card>
) : uploadResponse ? (
<UploadResponseView data={uploadResponse} onReset={resetUpload} />
) : (
<div className="flex flex-col items-center justify-center p-8">
<Spinner />
<p className="mt-4">Processing upload...</p>
</div>
<Card className="w-full">
<CardContent className="flex flex-col items-center justify-center p-8">
<Spinner />
<p className="mt-4">Processing upload...</p>
</CardContent>
</Card>
)}
</div>
)