BH
Bùi Hoan

Upload Wrapper - Copy this React, Mui Component to your project

<Stack spacing={2} direction="row" alignItems="center" sx={{ p: (theme) => theme.spacing(0, 3, 3, 3) }} > {/* <Avatar src={user?.photoURL} alt={user?.displayName}> {user?.displayName?.charAt(0).toUpperCase()} </Avatar> */} <InputBase fullWidth placeholder="Write a comment…" value={message} onChange={handleChangeMessage} endAdornment={ <InputAdornment position="end" sx={{ mr: 1 }}> <IconButton size="small" onClick={handleAttach} > <Iconify icon="solar:gallery add bold" /> </IconButton> <IconButton size="small"> <Iconify icon="eva:send fill" /> </IconButton> </InputAdornment> } inputProps={{ id: `comment input`, 'aria label': 'Write a comment' }} sx={{ pl: 1.5, height: 60, borderRadius: 1, border: (theme) => `solid 1px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.32)}`, }} /> <input type="file" ref={fileRef} style={{ display: 'none' }} /> <Button variant="contained" onClick={handlePost}>Post</Button> </Stack> </> từ đoạn code này viết thêm upload file call api và file hiển thị trong input

Prompt
Component Preview

About

UploadWrapper - A sleek file upload component with comment input, file attachment, and posting features, professionally built with React and MUI. Free code available!

Share

Last updated 1 month ago