ReferralForm.jsx:91 
 Error submitting referral: 
AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_RESPONSE"
config
: 
{transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
: 
"Request failed with status code 500"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
: 
config
: 
{transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
data
: 
"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Error: ENOENT: no such file or directory, open &#39;C:\\Users\\Administrator\\Downloads\\employee-referral-portal\\backend\\uploads\\1745139875227-RESUME__Ankita.pdf&#39;</pre>\n</body>\n</html>\n"
headers
: 
AxiosHeaders {content-length: '290', content-type: 'text/html; charset=utf-8'}
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status
: 
500
statusText
: 
"Internal Server Error"
[[Prototype]]
: 
Object
status
: 
500
stack
: 
"AxiosError: R    
import React, { useState } from 'react';
import {
  Box,
  TextField,
  Button,
  Typography,
  Paper,
  Alert,
  Grid,
} from '@mui/material';
import axios from 'axios';

const ReferralForm = () => {
  const [formData, setFormData] = useState({
    candidateName: '',
    email: '',
    mobile: '',
    experience: '',
    applyingFor: '',
    referredBy: {
      name: '',
      email: ''
    },
    resume: null
  });
  const [message, setMessage] = useState({ type: '', text: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name.includes('referredBy')) {
      const field = name.split('.')[1];
      setFormData(prev => ({
        ...prev,
        referredBy: {
          ...prev.referredBy,
          [field]: value
        }
      }));
    } else {
      setFormData(prev => ({
        ...prev,
        [name]: value
      }));
    }
  };

  const handleFileChange = (e) => {
    setFormData(prev => ({
      ...prev,
      resume: e.target.files[0]
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formDataToSend = new FormData();
    
    // Append all form fields
    formDataToSend.append('candidateName', formData.candidateName);
    formDataToSend.append('email', formData.email);
    formDataToSend.append('mobile', formData.mobile);
    formDataToSend.append('experience', formData.experience);
    formDataToSend.append('applyingFor', formData.applyingFor);
    formDataToSend.append('referredBy', JSON.stringify(formData.referredBy));
    
    // Append resume if it exists
    if (formData.resume) {
      formDataToSend.append('resume', formData.resume);
    }

    try {
      const response = await axios.post('http://localhost:5000/api/referral/submit', formDataToSend, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      setMessage({ type: 'success', text: 'Referral submitted successfully!' });
      setFormData({
        candidateName: '',
        email: '',
        mobile: '',
        experience: '',
        applyingFor: '',
        referredBy: {
          name: '',
          email: ''
        },
        resume: null
      });
    } catch (error) {
      console.error('Error submitting referral:', error);
      setMessage({ 
        type: 'error', 
        text: error.response?.data?.message || 'Error submitting referral. Please try again.' 
      });
    }
  };

  return (
    <Box sx={{ maxWidth: 800, mx: 'auto', mt: 4, p: 3 }}>
      <Paper elevation={3} sx={{ p: 3 }}>
        <Typography variant="h5" gutterBottom>
          Submit Referral
        </Typography>
        {message.text && (
          <Alert severity={message.type} sx={{ mb: 2 }}>
            {message.text}
          </Alert>
        )}
        <form onSubmit={handleSubmit}>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Candidate Name"
                name="candidateName"
                value={formData.candidateName}
                onChange={handleChange}
                margin="normal"
                required
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Candidate Email"
                name="email"
                type="email"
                value={formData.email}
                onChange={handleChange}
                margin="normal"
                required
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Mobile Number"
                name="mobile"
                value={formData.mobile}
                onChange={handleChange}
                margin="normal"
                required
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Experience"
                name="experience"
                value={formData.experience}
                onChange={handleChange}
                margin="normal"
                required
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Applying For"
                name="applyingFor"
                value={formData.applyingFor}
                onChange={handleChange}
                margin="normal"
                required
              />
            </Grid>
            <Grid item xs={12}>
              <Typography variant="h6" sx={{ mt: 2, mb: 1 }}>
                Referred By
              </Typography>
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Referrer Name"
                name="referredBy.name"
                value={formData.referredBy.name}
                onChange={handleChange}
                margin="normal"
                required
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Referrer Email"
                name="referredBy.email"
                type="email"
                value={formData.referredBy.email}
                onChange={handleChange}
                margin="normal"
                required
              />
            </Grid>
            <Grid item xs={12}>
              <Button
                variant="contained"
                component="label"
                sx={{ mt: 2 }}
              >
                Upload Resume (Optional)
                <input
                  type="file"
                  hidden
                  accept=".pdf,.doc,.docx"
                  onChange={handleFileChange}
                />
              </Button>
              {formData.resume && (
                <Typography sx={{ mt: 1 }}>
                  Selected file: {formData.resume.name}
                </Typography>
              )}
            </Grid>
          </Grid>
          <Button
            type="submit"
            variant="contained"
            color="primary"
            fullWidth
            sx={{ mt: 3 }}
          >
            Submit Referral
          </Button>
        </form>
      </Paper>
    </Box>
  );
};

export default ReferralForm;