delete icon for image uploader

js21 react/my-react-app/src/components/ImageUploader.js

@@ -3,6 +3,7 @@ import { BASE_URL, useUploadImageMutation } from '../store/api';
 import { useDropzone } from 'react-dropzone';
 import { Image } from './Image/Image';
 import { Avatar, Box } from '@mui/material';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import Dnd from './Dnd';
 
 const baseStyle = {
@@ -38,8 +39,14 @@ const rejectStyle = {
 };
 
 const ImageOnDnd = ({ image, onDelete }) =>
-  <Box sx={{ width: '100px', mr: '20px' }} key={image._id}>
-    <Image url={image?.url} click={() => onDelete(image)} />
+  <Box sx={{ width: '100px', mr: '20px', position: 'relative' }} key={image._id}>
+    <Box
+      onClick={() => onDelete(image)}
+      sx={{ position: 'absolute', right: '-12px', top: '-6px', cursor: 'pointer' }}
+    >
+      <HighlightOffIcon sx={{ color: '#1976d2' }} />
+    </Box>
+    <Image url={image?.url} />
   </Box>
 
 function ImageUploader({ previousImages, onChange, isAvatar }) {
@@ -54,10 +61,10 @@ function ImageUploader({ previousImages, onChange, isAvatar }) {
   }
 
   const onDrop = acceptedFiles => {
-      filesUpload(acceptedFiles).then(imagesResponse => {
-        console.log(imagesResponse);
-        updateImages(isAvatar ? imagesResponse : images.concat(imagesResponse));
-      });
+    filesUpload(acceptedFiles).then(imagesResponse => {
+      console.log(imagesResponse);
+      updateImages(isAvatar ? imagesResponse : images.concat(imagesResponse));
+    });
   }
   const {
     getRootProps,
@@ -100,7 +107,7 @@ function ImageUploader({ previousImages, onChange, isAvatar }) {
     <>
       <div {...getRootProps({ style })}>
         <input {...getInputProps()} />
-        {isAvatar ? <Avatar sx={{width: '250px', height: '250px'}} src={images[0] ? (BASE_URL + '/' + images[0]?.url) : ''}/> :
+        {isAvatar ? <Avatar sx={{ width: '250px', height: '250px' }} src={images[0] ? (BASE_URL + '/' + images[0]?.url) : ''} /> :
           <>
             {
               isDragActive ?