Search code examples
reactjsreact-typescript

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
    }
  };

Solution

  • 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
        }
      };