AvatarDropzone
The AvatarDropzone component is a circular, single-file dropzone for profile pictures. While empty it shows a dashed circle with an icon; a selected image fills the circle and can be removed with the corner button. Selecting a new file replaces the current one.
import React from "react";
import { AvatarDropzone } from "cherry-styled-components";
export default function Page() {
return (
<AvatarDropzone
$maxBytes={5 * 1024 * 1024}
onFileChange={(file) => console.log(file)}
onFileRejected={({ file, reason }) => console.warn(file.name, reason)}
/>
);
}With sizes:
<AvatarDropzone $size="small" />
<AvatarDropzone $size="big" />Properties
Size of the circle: 64px (small), 96px (default), or 128px (big).
Name of the Lucide icon shown while empty. IconProps is a string union of all Lucide icon names, not an object. Defaults to "User".
Maximum file size in bytes.
Accessible label for the drop target. Defaults to "Upload profile picture".
Called with the selected picture, or null when it is removed.
Called when a file is rejected for being the wrong type or too big.
Native accept filter. Defaults to "image/*".
Cherry theme object.