Avatar Uploader
A React component to upload and crop avatars.
As a frontend developer, your task is to create a React component using Typescript to let users upload and crop avatars.
The <AvatarUpload /> component should allow users to upload images to make it easier for them to recognize key interface elements related to an organization.
- It should allow uploading an image by dragging it into the dashed area or clicking on it.
- Throughout the entire process, the user can click on the "X" icon to cancel and return to the initial state
- After uploading, the user can adjust the image to better fit the circular format. Using a slider, the user can zoom in and out on the image cut out by the circular mask to preview the final result.
- Clicking on save, the component should display the cropped logo and a button to restart the process. It must also provide some way for parent components to access the resulting image's raw data.
We are very focused on code quality, so we expect you to include tests to ensure all requirements are covered.
Feel free to extract out subcomponents, like the slider, as you find necessary. You can also use open-source components available in the community – why reinvent the wheel, right? 😜
You can find the component's design here.
Please send us the repository's link to [email protected], and we will reply to your email with the next steps in the process.
We will do our best to review your project and get back with feedback on the result as soon as possible.