added file upload component

2024-04-12 17:41:58 +01:00
parent 856c70628a
commit b48cb48213
4 changed files with 64 additions and 14 deletions
@@ -0,0 +1,51 @@
+import React, { useRef, useState } from 'react'
+
+export default function AttachFile({data}) {
+
+    const [file, setFile] = useState('')
+
+    const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message:''})
+
+    const inputFile = useRef()
+    console.log('data', data.job_uid)
+
+    let inputs = {
+        file: file,
+        job_uid: data?.job_uid,
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+      };
+
+    const upload = () => {
+        setRequestStatus({loading: true, status:false, message:''})
+        if(!file){
+            setRequestStatus({loading: false, status:false, message:'Please select a file'})
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+            return 
+        }
+        const formData = new FormData()
+        for (let input in inputs) {
+            formData.append(input, inputs[input]);
+        }
+
+        console.log('data', formData, inputs)
+        inputFile.current.value = []
+        inputFile.current.value = null
+        setFile('')
+    }
+
+    return (
+        <div className='p-4 w-full h-full flex flex-col justify-center items-center bg-yellow-500 rounded-md'>
+            <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                <input type="file" ref={inputFile} className='file:rounded-full job-label p-1' onChange={(e) => setFile(e.target.files[0])}/>
+                <div className='w-full flex gap-2 items-center'>
+                    <button type="button" className='custom-btn btn-gradient text-white font-medium' onClick={upload}>Upload</button>
+                    {requestStatus.message && <p className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</p>}
+                </div>
+            </div>
+        </div>
+    )
+}