React hook form file upload, file length is 0 and after submit all fields are getting reset except select option

Question

  function Donate() {
      const {
        register,
        handleSubmit,
        watch,
        formState: { errors },
        reset,
      } = useForm();
      const makePayment = (data) => {
        console.log(data);
        reset();
      };
      return (
        <div>
          <Container>
            <Row>
              <Col sm={18} md={8} lg={8} className="mx-auto">
                <Form onSubmit={handleSubmit(makePayment)}>
                  <Form.Group className="mb-3" controlId="name">
                    <Form.Label>Name</Form.Label>
                    <Form.Control
                      type="text"
                      placeholder="Enter name"
                      {...register("name")}
                    />
                   
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="email">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control
                      type="email"
                      placeholder="Enter email"
                      {...register(
                        "email"
                       
                      )}
                    />
                    
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="file">
                    <Form.Label>Image</Form.Label>
                    <Form.Control type="file" {...register("file")} />
                    
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="pnumber">
                    <Form.Label>Phone Number</Form.Label>
                    <Form.Control
                      type="text"
                      placeholder="Enter phone number(without 0/+91)"
                      {...register("pnumber")}
                    />
                    </Form.Group>
                  <Form.Group controlId="studiesorjob">
                    <Form.Label>Doing Studies or Job</Form.Label>
                    <Form.Control
                      as="select"
                      {...register("studiesorjob")}
                    >
                      <option selected disabled></option>
                      <option value="studies">Studies</option>
                      <option value="job">Job</option>
                    </Form.Control>
                  </Form.Group>
                  <Form.Group className="mb-3" controlId="amount">
                    <Form.Label>Amount you'd like to donate</Form.Label>
                    <Form.Control
                      placeholder="Amount"
                      type="number"
                      min="1"
                      {...register("amount")}
                    />
                    
                  </Form.Group>
                  <Button variant="primary" type="submit">
                    Submit
                  </Button>
                </Form>
              </Col>
            </Row>
          </Container>
        </div>
      );
    }

Here, in this code I'm trying to make file upload along with other fields, but file length is showing 0. Also on submit, in "makePayment", file Length is showing 0, and every field is getting reset after submitting except Select option field. I am using react hook form npm library in this. Select reset is not happening and file upload is not working.

Answer 1

Please remove the reset() call on the form submit event, add the reset call after the api call, like submit the form, call the submit api, then on the success response, call the reset();

Also, I am not sure <Form.Control type="file" {...register("file")} /> here you should add <Form.Control as="input" type="file" {...register("file")} />, may be this is also causing the issue.