/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/avatars/UploadAvatars.js
53 строки
1 KB
Feliche-Demian Netliukh
[docs][Avatar] Add avatar upload demo (#45986)
24 апр 2025, 11:07
Не верифицирован
24 апр 2025, 11:07
428fb71
Код
Авторство
О чём код?
import * as React from 'react'; import Avatar from '@mui/material/Avatar'; import ButtonBase from '@mui/material/ButtonBase'; export default function UploadAvatars() { const [avatarSrc, setAvatarSrc] = React.useState(undefined); const handleAvatarChange = (event) => { const file = event.target.files?.[0]; if (file) { // Read the file as a data URL const reader = new FileReader(); reader.onload = () => { setAvatarSrc(reader.result); }; reader.readAsDataURL(file); } }; return ( <ButtonBase component="label" role={undefined} tabIndex={-1} // prevent label from tab focus aria-label="Avatar image" sx={{ borderRadius: '40px', '&:has(:focus-visible)': { outline: '2px solid', outlineOffset: '2px', }, }} > <Avatar alt="Upload new avatar" src={avatarSrc} /> <input type="file" accept="image/*" style={{ border: 0, clip: 'rect(0 0 0 0)', height: '1px', margin: '-1px', overflow: 'hidden', padding: 0, position: 'absolute', whiteSpace: 'nowrap', width: '1px', }} onChange={handleAvatarChange} /> </ButtonBase> ); }