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

88
components/upload-component.tsx
View File

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