title: Files not getting uploaded from react hook forms to backend server
body: <p>Hey guys i am learning react and I am trying to upload image from react hook forms to a django server. I am having trouble with the form as text data is being passed on but the image is not getting send from the form. I am not sure, the code I have is correctly written. Can anyone please check the code and help solving the problem? I have checked the api endpoint with postman and it works fine.</p>
  <p>form</p>
  <pre><code>export default function PostCreate() {
  const classes = useStyles();
  
  const [postimage, setPostImage] = useState(null);
  
  
  const handleChange = (e) =&gt; {
      if ([e.target.name] === 'image') {
          setPostImage({
              postimage: e.target.files,
          });
          console.log(e.target.files);
      }
      
  }
  
  
  const { register, handleSubmit, control, errors } = useForm();
  
  const onSubmit = (data) =&gt;{
      let formData = new FormData();
  
      formData.append('title', data.title);
      formData.append('user', 1);
      formData.append('image', data.image);
  
      axiosInstance.post(`api/posts/create/`, formData);
      console.log(data)
  } ;
  console.log(errors);
  
  return (
      &lt;Container component=&quot;main&quot; maxWidth=&quot;xs&quot;&gt;
          &lt;CssBaseline /&gt;
          &lt;div className={classes.paper}&gt;
              &lt;Typography component=&quot;h1&quot; variant=&quot;h5&quot;&gt;
                  Post!
              &lt;/Typography&gt;
  
              &lt;form noValidate onSubmit={handleSubmit(onSubmit)}&gt;
                  &lt;Grid container spacing={2}&gt;
                      &lt;Grid item xs={12}&gt;
                          &lt;TextField
                              variant=&quot;outlined&quot;
                              fullWidth
                              id=&quot;title&quot;
                              type=&quot;text&quot; 
                              placeholder=&quot;Title&quot;
                              autoComplete=&quot;title&quot; 
                              name=&quot;title&quot; 
                              inputRef={register({required: true, maxLength: 1000})}
                              multiline
                              rows={4}
                          /&gt;
                      &lt;/Grid&gt;
  
                      &lt;label htmlFor=&quot;post-image&quot;&gt;
                          &lt;input
                          accept=&quot;image/*&quot;
                          className={classes.input}
                          id=&quot;post-image&quot;
                          onChange={handleChange}
                          name=&quot;image&quot;
                          type=&quot;file&quot;
                          inputRef={register}
                      /&gt;
                          Image
                          &lt;IconButton color=&quot;primary&quot; component=&quot;span&quot;&gt;
                              &lt;PhotoCamera /&gt;
                          &lt;/IconButton&gt;
                      &lt;/label&gt;
  
                  &lt;/Grid&gt;
                  &lt;Button
                      type=&quot;submit&quot;
                      fullWidth
                      variant=&quot;contained&quot;
                      color=&quot;primary&quot;
                      className={classes.submit}
                      name=&quot;button&quot;
                  &gt;
                      Create Post
                  &lt;/Button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/Container&gt;
  );
  
  }
  </code></pre>
  <p><code>console.log(data)</code> is showing <code>{title: &quot;kjhkdjfnd&quot;}</code> and not the image field.
  <code>console.log(data.image)</code> is showing undefined. What can be the reason?</p>
  <p>Thanks</p>