SGUI / Development
ImageUploadModal
Picker/drop presentation, optional descriptions, retryable errors and host-owned upload.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Picker/drop presentation, optional descriptions, retryable errors and host-owned upload.
Loading examples…
Loading examples…
Loading examples…
Ready
Picker/drop presentation, optional descriptions, retryable errors and host-owned upload.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ImageUploadModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ImageUploadModalExample() {
const [open,setOpen] = useState(false);
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button onPress={()=>setOpen(true)}>Select image</Button><Typography role="status">{status}</Typography><ImageUploadModal open={open} title={"Building a thoughtful learning experience"} enableAltText={true} onClose={()=>setOpen(false)} onSubmit={async(file,alt)=>{setStatus('Selected '+file.name+'; description: '+(alt||'decorative')+'. No upload performed.');setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
Picker/drop presentation, optional descriptions, retryable errors and host-owned upload.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ImageUploadModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ImageUploadModalExample() {
const [open,setOpen] = useState(false);
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button onPress={()=>setOpen(true)}>Select image</Button><Typography role="status">{status}</Typography><ImageUploadModal open={open} title={"Building a thoughtful learning experience"} enableAltText={true} onClose={()=>setOpen(false)} onSubmit={async(file,alt)=>{setStatus('Selected '+file.name+'; description: '+(alt||'decorative')+'. No upload performed.');setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
Picker/drop presentation, optional descriptions, retryable errors and host-owned upload.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ImageUploadModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ImageUploadModalExample() {
const [open,setOpen] = useState(false);
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button onPress={()=>setOpen(true)}>Select image</Button><Typography role="status">{status}</Typography><ImageUploadModal open={open} title={"Building a thoughtful learning experience"} enableAltText={false} onClose={()=>setOpen(false)} onSubmit={async(file,alt)=>{setStatus('Selected '+file.name+'; description: '+(alt||'decorative')+'. No upload performed.');setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}
Picker/drop presentation, optional descriptions, retryable errors and host-owned upload.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ImageUploadModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ImageUploadModalExample() {
const [open,setOpen] = useState(false);
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Button onPress={()=>setOpen(true)}>Select image</Button><Typography role="status">{status}</Typography><ImageUploadModal open={open} title={"Building a thoughtful learning experience"} enableAltText={true} onClose={()=>setOpen(false)} onSubmit={async(file,alt)=>{throw new Error('Simulated host rejection');}}/></Stack>
</ThemeScope>
</>
);
}
Picker/drop presentation, optional descriptions, retryable errors and host-owned upload.
Ready
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, ImageUploadModal } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function ImageUploadModalExample() {
const [open,setOpen] = useState(false);
const [status,setStatus] = useState("Ready");
return (
<>
<ThemeScope density="compact">
<Stack gap={3}><Button onPress={()=>setOpen(true)}>Select image</Button><Typography role="status">{status}</Typography><ImageUploadModal open={open} title={"Building a thoughtful learning experience"} enableAltText={true} onClose={()=>setOpen(false)} onSubmit={async(file,alt)=>{setStatus('Selected '+file.name+'; description: '+(alt||'decorative')+'. No upload performed.');setOpen(false);}}/></Stack>
</ThemeScope>
</>
);
}