File Input Shows Preview

src/components/fileInput/index.js

@@ -3,41 +3,28 @@ import React from "react";
 import { useState, useEffect } from "react";
 
 const FileInput = ({
-    title
+    title,
+    id
 }) => {
 
-    const [focus, setFocus] = useState('border-gray-300');
-    const [selectedFile, setSelectedFile] = useState()
-    const [preview, setPreview] = useState();
-
+    const [focus, setFocus] = useState('border-gray-300 border-dotted');
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [imageUrl, setImageUrl] = useState(null);
     useEffect(() => {
-        if (!selectedFile) {
-            setPreview(undefined)
-            return
+        if (selectedImage) {
+          setImageUrl(URL.createObjectURL(selectedImage));
         }
+      }, [selectedImage]);
 
-        const objectUrl = URL.createObjectURL(selectedFile)
-        setPreview(objectUrl)
-
-        // free memory when ever this component is unmounted
-        return () => URL.revokeObjectURL(objectUrl)
-    }, [selectedFile])
-
-    const onSelectFile = e => {
-        if (!e.target.files || e.target.files.length === 0) {
-            setSelectedFile(undefined)
-            return
-        }
    
-        // I've kept this example simple by using the first image instead of multiple
-        setSelectedFile(e.target.files[0])
-    }
     return (
         <div >
             
-            <input type='file'  id="file" onFocus={() => setFocus('border-red52')} onchange={(e) => onSelectFile(e)}/>
-            <label for="file" className={`flex flex-col text-center items-center border-dotted border-2 ${focus} rounded-lg p-4 cursor-pointer`} >
-            <div>
+            <input type='file' className="hidden" id={`file` + id} accept="image/*" onFocus={() => setFocus('border-red52')} onChange={e => {setSelectedImage(e.target.files[0]); setFocus('border-red52 border-solid')}}/>
+            <label for={"file" + id} className={`flex flex-col text-center justify-center items-center  border-2 ${focus} rounded-lg p-4 cursor-pointer`} style={{maxHeight: '200px'}}>
+            {imageUrl == null ?
+                <>
+                <div>
                 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M9 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44001 10.9 3.20001L12.4 5.20001C12.78 5.70001 13 6 14 6H17C21 6 22 7 22 11V13" stroke="rgba(110,132,159,0.3)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                     <path d="M13.7601 18.32C11.4101 18.49 11.4101 21.89 13.7601 22.06H19.3201C19.9901 22.06 20.6501 21.81 21.1401 21.36C22.7901 19.92 21.91 17.04 19.74 16.77C18.96 12.08 12.1801 13.86 13.7801 18.33" stroke="rgba(110,132,159,0.3)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
@@ -46,8 +33,17 @@ const FileInput = ({
             <h1 className="text-xl font-bold text-gray-400">{title}</h1>
             <p className="text-sm leading-7 text-gray-400">فایل خود را بکشید و اینجا رها کنید</p>
             <p className="bg-gray-200 p-2 rounded text-sm mt-1 text-gray-500">انتخاب فایل</p>
-            {selectedFile &&  <img src={preview} /> }
+            </>
+            :
+            <>
+            <div className="h-40">
+            <img src={imageUrl} className="rounded-lg h-full"/>
+            </div>
+            </>
+            }
             </label>
+           
+            
         </div>
     )
 }

src/view/register/index.js

@@ -185,10 +185,10 @@ const Register = ({ activeLogin }) => {
                                     </div>
                                     <div className="w-3/5 flex justify-center">
                                         <div className="w-2/5 mx-4">
-                                            <FileInput title="بارگزای صفحه اول شناسنامه" />
+                                            <FileInput title="بارگزای صفحه اول شناسنامه" id={1}/>
                                         </div>
                                         <div className="w-2/5 mx-4">
-                                            <FileInput title="بارگزای صفحه اول شناسنامه" />
+                                            <FileInput title="بارگزای صفحه اول شناسنامه" id={2}/>
                                         </div>
                                     </div>