Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Argument of type 'File' is not assignable to parameter of type 'SetStateAction<string>'

I'm building an application using React with typescript, I have a multipart post that works if I initialize to any my 'evt' on the handleImageUpload function. But if I try to initialize it to React.ChangeEvent gives the following error:

'Argument of type 'File' is not assignable to parameter of type 'SetStateAction'.' can you help me to solve this problem? can you also suggest to me how to change the any initialization of my handleSubmit function? thank you <3

  const handleSubmit = async (evt: any) => {
    // debugger;
    evt.preventDefault();
    setIsProcessingUpload(true);
    const formData = new FormData();
    formData.append('logoimg', logo);
    formData.append('background_image', background);
    formData.append('name', name);

    console.log(formData);
    try {
      Api.post('api/companies', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).finally(() => {
        setIsProcessingUpload(false)
        closeModal();
      });
    } catch (err) {
      console.log(err);
    }
  };
  const [logo, setImage] = useState('');

  const handleImageUpload = (evt: React.ChangeEvent<HTMLInputElement>) => {
    if (evt.target.files != null) {
      setImage(evt.target.files[0]); //error
    }
  };
like image 644
Franco Romano Avatar asked Sep 15 '25 12:09

Franco Romano


1 Answers

How about declaring File type for your useState instead of String '';

 const [logo, setImage] = useState<File | null>(null);

  const handleImageUpload = (evt: React.ChangeEvent<HTMLInputElement>) => {
    if (evt.target.files != null) {
      setImage(evt.target.files[0]); //error
    }
  };
like image 52
David Yappeter Avatar answered Sep 17 '25 02:09

David Yappeter