Akshith - Job Analytics Page- Fix Resume Upload Functionality on Job Application Page

src/components/Collaboration/JobApplicationForm/JobApplicationForm.jsx

@@ -22,6 +22,9 @@
   const [companyPosition, setCompanyPosition] = useState('');
   const [websiteSocial, setWebsiteSocial] = useState('');
   const [resumeFile, setResumeFile] = useState(null);
+  const [resumeStatus, setResumeStatus] = useState('idle');
+  // idle | uploading | success | error
+  const [resumeError, setResumeError] = useState('');
   const resumeInputRef = useRef(null);
 
   const darkMode = useSelector(state => state.theme?.darkMode);
@@ -94,7 +97,40 @@
 
   const handleResumeChange = e => {
     const f = e.target.files?.[0] || null;
+
+    if (!f) {
+      setResumeFile(null);
+      setResumeStatus('idle');
+      return;
+    }
+
+    // Basic validation (optional but recommended)
+    const allowedTypes = [
+      'application/pdf',
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    ];
+
+    if (!allowedTypes.includes(f.type)) {
+      setResumeStatus('error');
+      setResumeError('Only PDF or Word documents are allowed.');
+      setResumeFile(null);
+      toast.error('Invalid file type. Please upload PDF or DOC/DOCX.');
+      return;
+    }
+
     setResumeFile(f);
+    setResumeStatus('success');
+    setResumeError('');
+
+    toast.success(`Resume selected: ${f.name}`);
+  };
+
+  const handleRemoveResume = () => {
+    setResumeFile(null);
+    setResumeStatus('idle');
+    setResumeError('');
+    if (resumeInputRef.current) resumeInputRef.current.value = '';
   };
 
   const validateBeforeSubmit = () => {
@@ -132,6 +168,8 @@
     setCompanyPosition('');
     setWebsiteSocial('');
     setResumeFile(null);
+    setResumeStatus('idle');
+    setResumeError('');
     if (resumeInputRef.current) resumeInputRef.current.value = '';
     setAnswers(new Array((filteredForm?.questions ?? []).length).fill(''));
   };
@@ -244,15 +282,40 @@
                   value={websiteSocial}
                   onChange={e => setWebsiteSocial(e.target.value)}
                 />
-                <label className={styles.resumeLabel}>
-                  Upload Resume (optional)
-                  <input
-                    ref={resumeInputRef}
-                    type="file"
-                    accept=".pdf,.doc,.docx"
-                    onChange={handleResumeChange}
-                  />
-                </label>
+                <div className={styles.resumeWrapper}>
+                  <label
+                    className={`${styles.resumeLabel} ${
+                      resumeStatus === 'success'
+                        ? styles.success
+                        : resumeStatus === 'error'
+                        ? styles.error
+                        : ''
+                    }`}
+                  >
+                    {resumeFile ? (
+                      <span className={styles.fileName}>📄 {resumeFile.name}</span>
+                    ) : (
+                      'Upload Resume (optional)'
+                    )}
+
+                    <input
+                      ref={resumeInputRef}
+                      type="file"
+                      accept=".pdf,.doc,.docx"
+                      onChange={handleResumeChange}
+                    />
+                  </label>
+
+                  {resumeFile && (
+                    <button
+                      type="button"
+                      className={styles.removeResumeBtn}
+                      onClick={handleRemoveResume}
+                    >
+                      ✕
+                    </button>
+                  )}
+                </div>
               </div>
               <div className={styles.formGroup}>
                 <h2>1. How did you hear about One Community?</h2>