Merge pull request #109 from kshitij01042002/img-preview

src/App.jsx

@@ -273,7 +273,10 @@ function App() {
           </div>
         )}
       </div>
-      <Dialog open={openNewUpload} onClose={() => setOpenNewUpload(false)}>
+      <Dialog 
+      open={openNewUpload} 
+      onClose={() => setOpenNewUpload(false)}
+      >
         <DialogTitle>New Upload</DialogTitle>
         <DialogContent>
           {!loadingPosts &&
@@ -317,8 +320,7 @@ function App() {
                 onChange={(e) => setPassword(e.target.value)}
               />
               <label for="file">Choose your profile pic</label>
-              <Input type="file" id="file" onChange={handleChange} />
-
+              <Input type="file" id="file" onChange={handleChange}/>
               <AnimatedButton
                 type="submit"
                 variant="contained"

src/components/ImgUpload.jsx

@@ -4,20 +4,30 @@ import firebase from "firebase/compat/app";
 import AnimatedButton from "./AnimatedButton";
 import { LinearProgress, TextField } from "@mui/material";
 import { useSnackbar } from "notistack";
+import "./imgPreview.css";
+
 
 function ImgUpload(props) {
   const [image, setImage] = useState(null);
   const [caption, setCaption] = useState("");
   const [progress, setProgress] = useState(0);
   const [uploadingPost, setUploadingPost] = useState(false);
   const imgInput = useRef(null);
+  const [imagePreviews, setImagePreviews] = useState([]);
 
   const handleChange = (e) => {
+    let images = [];
+
     if (e.target.files?.length) {
       setImage(Array.from(e.target.files));
+      setImagePreviews(image);
+    }
+    for (let i = 0; i < e.target.files.length; i++) {
+      images.push(URL.createObjectURL(e.target.files[i]));
     }
-  };
 
+    setImagePreviews(images);
+  };
 
   const { enqueueSnackbar } = useSnackbar();
 
@@ -121,7 +131,21 @@ function ImgUpload(props) {
           ref={imgInput}
           disabled={uploadingPost}
         />
-      )} 
+      )}
+      {imagePreviews && (
+        <div>
+          {imagePreviews.map((img, i) => {
+            return (
+              <img 
+              id="imgPreview"
+              className="preview" 
+              src={img} 
+              alt={`image-${i}`}
+              key={i} />
+            );
+          })}
+        </div>
+      )}
       <TextField
         onChange={(e) => setCaption(e.target.value)}
         value={caption}
@@ -131,7 +155,7 @@ function ImgUpload(props) {
         rows={4}
         disabled={uploadingPost}
       />
-      <AnimatedButton onClick={handleUpload} loading={uploadingPost}> 
+      <AnimatedButton onClick={handleUpload} loading={uploadingPost}>
         Upload
       </AnimatedButton>
     </div>

src/components/imgPreview.css

@@ -0,0 +1,5 @@
+.preview{
+    width: 150px;
+    height: auto; 
+    padding: 50px;
+  }

src/index.css

@@ -210,3 +210,5 @@ div#picker {
   left: -7px;
   transform: scale(0.9);
 }
+
+