title: Multipart form component "cannot POST / divespotform" not working parseInt issue?
body: <p>I have  a multipart form that I am nearly finished working on that is still not posting to my backend database. Could this be to do with the fact that I am not parsing my two ID fields as ints correctly?</p>
  <p>The two text fields and file field look like they are being sent in the request correctly. Is the random pink/blue/black/red symbols the image being sent to the backend? Should my two ID int fields also be showing here as they are on the same form?</p>
  <p>The method I have for my Argument 1 is not an object seems to be related to the diveSpotForm line of my handle submit method. Am I passing the form data to the action correctly? I think I might have over complicated the method not posting straight from the form component.</p>
  <p><a href="https://i.stack.imgur.com/E6uZ7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E6uZ7.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/Igpdv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Igpdv.png" alt="enter image description here" /></a></p>
  <p>form component</p>
  <pre><code> const [spot, setSpot] = useState({
          diveLocation: &quot;&quot;,
          diveRegionID: parseInt(``),
          diveTypeID: parseInt(``),
          diveSpotDescription: &quot;&quot;,
          diveSpotPhotos: &quot;&quot;,
          error: ''
      });
  
      // all onChange functions do the exact same thing, so you only need one
      // pass to a component like onChange={handleChange('typeID')}
      const handleChange = (property) =&gt; (e) =&gt; {
          setSpot({
              // override the changed property and keep the rest
              ...spot,
              [property]: e.target.value,
          });
      }
  
      // get access to dispatch
      const dispatch = useDispatch();
  
      // useEffect with an empty dependency array is the same as componentDidMount
      useEffect(() =&gt; {
          dispatch(requireFieldData());
      }, []);
  
      const handleSubmitDiveSpot = () =&gt; {
  
          const diveSpotForm = new FormData(document.querySelector(&quot;diveSpotForm&quot;))
          console.log('diveSpotForm', diveSpotForm);
  
          const diveSpot = {
              diveLocation: spot.diveLocation || undefined,
              diveRegionID: spot.diveRegionID || undefined,
              diveSpotTypeID: spot.diveSpotTypeID || undefined,
              diveSpotDescription: spot.diveSpotDescription || undefined,
              diveSpotPhotos: spot.diveSpotPhotos || undefined
          }
  
          // do some stuff with the form
          createDiveSpot(diveSpot).then((data) =&gt; {
              const newSpot = data.error
                  ? {...spot, error: data.error}
                  : {...spot, error: '', open: true};
              setSpot(newSpot);
              dispatch(addDiveSpot(newSpot));
          })
      }
  
  
      const classes = useStyles;
  
      return (
  
          &lt;form className=&quot;diveSpotForm&quot; method=&quot;POST&quot; encType=&quot;multipart/form-data&quot; onSubmit={handleSubmitDiveSpot}&gt;
              &lt;&gt;
                  &lt;Grid container spacing={3}
                        direction=&quot;row&quot;
                        justify=&quot;center&quot;
                        alignItems=&quot;center&quot;&gt;
                      &lt;Grid item xs={4}&gt;
                      &lt;FormControl className={classes.formControl}&gt;
                          &lt;PopulateDropdown
                              dataList={diveTypeList}
                              titleProperty={&quot;diveType&quot;} // option label property
                              valueProperty={&quot;diveTypeID&quot;} // option value property
                              name=&quot;diveType&quot;
                              placeholder=&quot;Dive Type&quot;
                              label=&quot;Select Dive Type&quot;
                              value={spot.diveTypeID}
                              onChange={handleChangeInt(parseInt(&quot;diveTypeID&quot;))}/&gt;
                      &lt;/FormControl&gt;
                      &lt;/Grid&gt;
                      &lt;br /&gt;
                     ........
  
                      &lt;br /&gt;
                      &lt;Grid item xs={10}&gt;
                          &lt;FormControl fullWidth className={classes.margin}&gt;
                              &lt;TextField
                                  label=&quot;Description&quot;
                                  name=&quot;diveSpotDescription&quot;
                                  value={spot.diveSpotDescription}
                                  onChange={handleChange(&quot;diveSpotDescription&quot;)}
                                  multiline
                                  rowsMax={6}/&gt;
                          &lt;/FormControl&gt;
                      &lt;/Grid&gt;
                      &lt;br /&gt;
                      &lt;Grid item xs={12}&gt;
                          &lt;FormControl fullWidth className={classes.margin}&gt;
                              &lt;label for=&quot;photos&quot;&gt;Photo Upload&lt;/label&gt;
                              &lt;input
                                  type=&quot;file&quot;
                                  name=&quot;photo&quot;
                                  value={spot.diveSpotPhotos}
                                  onChange={handleChange(&quot;diveSpotPhotos&quot;)}/&gt;
                          &lt;/FormControl&gt;
                      &lt;/Grid&gt;
                      &lt;br /&gt;
                      &lt;Grid item xs={3}&gt;
                          &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot;&gt;
                              Submit&lt;/Button&gt;
                          &lt;br /&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
              &lt;/&gt;
          &lt;/form&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/UxCNN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UxCNN.png" alt="enter image description here" /></a></p>
  <p>action</p>
  <pre><code>export const createDiveSpot = async (diveSpot) =&gt; {
      try {
          let response = await fetch('http://localhost:5002/api/divespot/createdivespot', {
              method: 'POST',
              headers: {
                  &quot;Content-Type&quot;:&quot;multipart/form-data&quot;
              },
              body: new FormData(diveSpot)
          })
          return await response.json()
      } catch(err) {
          console.log(err)
      }
  }
  </code></pre>
  <p>backend</p>
  <pre><code>exports.createDiveSpot = async (req, res) =&gt; {
  
      const fileNameWithExtension = `${req.file.filename}-${req.file.originalname}`
      const newPath = `./assets/diveSpot/${fileNameWithExtension}`
  
      fs.rename(req.file.path, newPath, function (err) {
              if (err) {
                  console.log(err)
                  res.send(500)
              }
              diveSpot.create({
                  diveLocation: req.body.diveLocation,
                  diveRegionID: req.body.diveRegionID,
                  diveSpotTypeID: req.body.diveLocation,
                  diveSpotDescription: req.body.diveSpotDescription,
                  photos: fileNameWithExtension,
              })
                  .catch((err) =&gt; {
                      res.status(500).send({
                          message: err.message || 'Some error occurred while creating the post.',
                      })
                  })
          }
      )}
  </code></pre>
  <p>route</p>
  <pre><code>app.post('/api/divespot/createdivespot', upload.single(&quot;diveSpotPhotos&quot;), controller.createDiveSpot);
  </code></pre>
  <p><strong>update</strong></p>
  <p>I have also tried the below handleSubmit method and it is still showing the same two argument 1 is not an object errors. As there are two of them it looks like it could be the two id fields ( which are also not appearing on the payload request in the console).</p>
  <pre><code>function diveSpotForm(e: React.FormEvent&lt;HTMLFormElement&gt;) {
          e.preventDefault();
          const formData = new FormData();
          formData.append(&quot;diveLocation&quot;, spot.diveLocation);
          formData.append(&quot;diveRegionID&quot;, spot.diveRegionID);
          formData.append(&quot;diveSpotTypeID&quot;, spot.diveSpotTypeID);
          formData.append(&quot;diveSpotDescription&quot;, spot.diveSpotDescription);
          formData.append(&quot;photos&quot;, file);
          axios.post(&quot;http://localhost:5002/api/divespot/createdivespot&quot;, formData);
      }
  </code></pre>