score:0

Accepted answer
const [passportFile, setPassportFile] = useState("");
const [firstSelfieFile, setFirstSelfieFile] = useState("");
const [secondSelfieFile, setSecondSelfieFile] = useState("");
const [thirdSelfieFile, setThirdSelfieFile] = useState("");

console.log(passportFile);
console.log(firstSelfieFile);

const handlePassportUpload = (e) => {
  setPassportFile(e.target.files[0]);
  setPassportPresent(true);
};

const handleSelfieUpload = (e) => {
  if (e.target.name === "first_selfie") {
    setFirstSelfieFile(e.target.files[0]);
    setFirstSelfiePresent(true);
  } else if (e.target.name === "second_selfie") {
    setSecondSelfieFile(e.target.files[0]);
    setSecondSelfiePresent(true);
  } else if (e.target.name === "third_selfie") {
    setThirdSelfieFile(e.target.files[0]);
    setThirdSelfiePresent(true);
  }
};

return (
  <>
    <div className="file">
      <label className="file-label">
        <input
          onChange={handlePassportUpload}
          className="file-input is-rounded"
          type="file"
          name="passport_photo"
        />
        <span className="file-cta">
          <span className="file-icon">
            <i className="fas fa-upload" />
          </span>
          <span className="file-label">Upload Passport Photo</span>
        </span>
      </label>
    </div>
    <br />
    <div className="file">
      <label className="file-label">
        <input
          onChange={handleSelfieUpload}
          className="file-input"
          type="file"
          name="first_selfie"
        />
        <span className="file-cta">
          <span className="file-icon">
            <i className="fas fa-upload" />
          </span>
          <span className="file-label">Upload First Selfie</span>
        </span>
      </label>
    </div>
  </>
);

Related Query

More Query from same tag