Finished image picker

src/components/ImagePicker/ImagePicker.js

@@ -14,20 +14,21 @@ import { Icon } from "../Icon/Icon";
 const ImagePicker = (props) => {
   const fileInputRef = useRef(null);
   const [isOpened, setIsOpened] = useState(false);
+  const [image, setImage] = useState("");
 
   const handleChange = () => {
     fileInputRef.current.click();
-    console.log(fileInputRef.current.click);
   };
   const handleImage = (event) => {
-    console.log("fileEvent: ", event.target.files[0]);
     let reader = new FileReader();
     reader.readAsDataURL(event.target.files[0]);
     reader.onload = () => {
-      console.log(reader.result.toString());
-      props.setImage(reader.result);
+      if (props.setImage) props.setImage(reader.result);
+      setImage(reader.result)
+    };
+    reader.onerror = (error) => {
+      console.log(error);
     };
-    reader.onerror = () => {};
   };
   const handleOpen = () => {
     setIsOpened(true);
@@ -37,7 +38,8 @@ const ImagePicker = (props) => {
     setIsOpened(false);
   };
   const handleDelete = () => {
-    props.deleteImage();
+    if (props.deleteImage) props.deleteImage();
+    setImage("");
     setIsOpened(false)
   }
   return (
@@ -57,12 +59,12 @@ const ImagePicker = (props) => {
     >
       <ImagePickerContainer
         className={props.className}
-        onClick={!props.image ? handleChange : () => {}}
+        onClick={!image ? handleChange : () => {}}
         hasImage={props.image}
       >
         <AddFile type="file" ref={fileInputRef} onInput={handleImage} />
-        {props.image ? (
-          <ImageUploaded src={props.image} draggable={false}></ImageUploaded>
+        {image ? (
+          <ImageUploaded src={image} draggable={false}></ImageUploaded>
         ) : (
           <AddIcon />
         )}