feat: added ImagePicker File Logic

fixing #115
roman-ojha · Jul 5, 2022 · e481fa3 · e481fa3
1 parent 7f614d2
commit e481fa3
Showing 1 changed file with 93 additions and 44 deletions.
diff --git a/client/src/components/ImagePicker.tsx b/client/src/components/ImagePicker.tsx
@@ -4,8 +4,9 @@ import { Icon } from "@iconify/react";
 import { AppState, actionCreators } from "../services/redux";
 import { bindActionCreators } from "redux";
 import { useDispatch, useSelector } from "react-redux";
+import { toastWarn } from "src/services/toast";
 
-const ImagePicker = (): JSX.Element => {
+const ReturnImagePicker = (): JSX.Element => {
   const dispatch = useDispatch();
   const imagePickerState = useSelector(
     (state: AppState) => state.imagePickerReducer
@@ -21,6 +22,28 @@ const ImagePicker = (): JSX.Element => {
     document.createElement("img")
   );
   imageElement.current.className = "ImagePicker_Content_Preview_ImgElement";
+  const inputFileElement: React.MutableRefObject<null | HTMLInputElement> =
+    useRef(null);
+
+  const getFile = () => {
+    if (
+      inputFileElement.current?.files !== null &&
+      imagePreviewH1Element.current !== null
+    ) {
+      const file = inputFileElement.current?.files[0];
+      imageElement.current.src = URL.createObjectURL(file!);
+      imagePreviewH1Element.current.replaceWith(imageElement.current);
+    }
+    if (
+      inputFileElement.current?.files !== null &&
+      inputFileElement.current?.files.length !== undefined &&
+      inputFileElement.current?.files.length > 0 &&
+      isImageUrl
+    ) {
+      toastWarn("Please select rather imageUrl or imageFile");
+      setImageUrl("");
+    }
+  };
 
   useEffect(() => {
     if (imagePickerState.openedImagePicker === true) {
@@ -52,68 +75,94 @@ const ImagePicker = (): JSX.Element => {
           imageElement.current.src = imageUrl;
           imagePreviewH1Element.current.replaceWith(imageElement.current);
         }
+        if (
+          inputFileElement.current?.files !== null &&
+          inputFileElement.current?.files.length !== undefined &&
+          inputFileElement.current?.files.length > 0
+        ) {
+          toastWarn("Please select rather imageUrl or imageFile");
+          setImageUrl("");
+        }
         setIsImageUrl(true);
       };
       img.onerror = () => {
-        if (imagePreviewH1Element !== null) {
+        if (
+          inputFileElement.current?.files !== null &&
+          inputFileElement.current?.files?.length !== 0 &&
+          imagePreviewH1Element.current !== null
+        ) {
+          const file = inputFileElement.current?.files[0];
+          imageElement.current.src = URL.createObjectURL(file!);
+          imagePreviewH1Element.current.replaceWith(imageElement.current);
+        } else if (
+          imagePreviewH1Element.current !== null &&
+          inputFileElement.current?.files?.length === 0
+        ) {
           imageElement.current.replaceWith(
             imagePreviewH1Element.current as Node
           );
         }
+        setIsImageUrl(false);
       };
     } catch (err) {}
   }, [imageUrl]);
+  console.log(isImageUrl);
 
   return (
     <>
-      {imagePickerState.openedImagePicker ? (
-        <div className="ImagePicker_Page" id="image-picker-page">
-          <div
-            className="ImagePicker_Content_Container"
-            id="image-picker-content-container"
-          >
-            <div className="ImagePicker_Image_Url_Container">
-              <input
-                type="text"
-                className="ImagePicker_Image_Url_Field"
-                placeholder="image url"
-                onChange={(e) => {
-                  setImageUrl(e.target.value);
-                }}
-                value={imageUrl}
-              />
-              <h2>
-                NOTE : Consider using image url rather then uploading files
-                because cloud database have limited Storage
-              </h2>
-            </div>
+      <div className="ImagePicker_Page" id="image-picker-page">
+        <div
+          className="ImagePicker_Content_Container"
+          id="image-picker-content-container"
+        >
+          <div className="ImagePicker_Image_Url_Container">
+            <input
+              type="text"
+              className="ImagePicker_Image_Url_Field"
+              placeholder="image url"
+              onChange={(e) => {
+                setImageUrl(e.target.value);
+              }}
+              value={imageUrl}
+            />
+            <h2>
+              NOTE : Consider using image url rather then uploading files
+              because cloud database have limited Storage
+            </h2>
+          </div>
 
-            <div className="ImagePicker_File_Picker_Container">
-              <div className="ImagePicker_File_Picker_Label_Container">
-                <Icon icon="fa:upload" />
-                <label htmlFor="image-picker-file-picker">upload file</label>
-              </div>
-              <input
-                type="file"
-                id="image-picker-file-picker"
-                className="ImagePicker_File_Picker_Field"
-                accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*"
-              />
+          <div className="ImagePicker_File_Picker_Container">
+            <div className="ImagePicker_File_Picker_Label_Container">
+              <Icon icon="fa:upload" />
+              <label htmlFor="image-picker-file-picker">upload file</label>
             </div>
-            <div
-              className="ImagePicker_Content_Preview"
-              ref={imagePreviewElement}
-            >
-              <h3 ref={imagePreviewH1Element}>Preview</h3>
-            </div>
-            <button className="ImagePicker_Submit_Button">Submit</button>
+            <input
+              type="file"
+              id="image-picker-file-picker"
+              className="ImagePicker_File_Picker_Field"
+              accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*"
+              ref={inputFileElement}
+              onChange={getFile}
+            />
           </div>
+          <div
+            className="ImagePicker_Content_Preview"
+            ref={imagePreviewElement}
+          >
+            <h3 ref={imagePreviewH1Element}>Preview</h3>
+          </div>
+          <button className="ImagePicker_Submit_Button">Submit</button>
         </div>
-      ) : (
-        ""
-      )}
+      </div>
     </>
   );
 };
 
+const ImagePicker = () => {
+  const imagePickerState = useSelector(
+    (state: AppState) => state.imagePickerReducer
+  );
+  return <>{imagePickerState.openedImagePicker ? <ReturnImagePicker /> : ""}</>;
+};
+
 export default ImagePicker;