FormData not letting me append file in React Js using typescript

Question

I want to send a File in my request using React Js, but I am unable to append file in object of FormData using typescript. Here's my React Js Code

    const [imageFile, setImageFile] = React.useState();
      const [productImageMutation, productImageMutationResult]=useAddProductImageMutation();
      const handleUploadClick = (e: any) => {
      var file = e.target.files[0];
      setImageFile(file);
  };
  const handleOnSubmit = (values: Picture) => {
      const formData = new FormData();
      formData.append("formFile", imageFile); //It Gives Error there.
    productImageMutation({ data: formData});
  };

Dulaj Ariyaratne · Accepted Answer · 2022-10-21 13:52:02Z

1

You should define your types correctly. Furthermore possible errors also should be handled as well.

const [imageFile, setImageFile] = React.useState<File>();

  const handleSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    if(event.target.files) {
      var file = event.target.files[0];
      setImageFile(file);
    }
  }

  const handleOnSubmit = (values: Picture) => {
    if(imageFile) {
      const formData = new FormData();
      formData.append("formFile", imageFile);
      productImageMutation({ data: formData});
    }else {
      // Display an error in this block
      // No file selected
     }

  };

answered Oct 21, 2022 at 13:52

Dulaj Ariyaratne

1,1181 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dulaj Ariyaratne Over a year ago

And one more point, although you initialize your state with an empty string as the below answer, there is a possibility of imageFile is empty. So it's better to do a null/undefined check as in my answer.

Ali Faiz · Accepted Answer · 2022-10-21 13:39:26Z

0

Try to update your state initialization

const [imageFile, setImageFile] = React.useState('');

And also mention a type to you state because in TS you must provide a type

answered Oct 21, 2022 at 13:39

Ali Faiz

2322 silver badges9 bronze badges

Collectives™ on Stack Overflow

FormData not letting me append file in React Js using typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related