title: RDU - Axios, Express and Multer
body: <p>Ok so last night I posted the request at the bottom of this window.</p>
  
  <p>I got up this morning and had another crack, and i'm almost there now, i'm glad to say.</p>
  
  <p>My only issue, now is that, on submission i'm getting a record in mongodb for each item of data:</p>
  
  <p><a href="https://i.stack.imgur.com/q6ilb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q6ilb.png" alt="enter image description here"></a></p>
  
  <p>This is my submit function:</p>
  
  <pre><code>const handleSubmit = (e) =&gt; {
      // console.log({ movie });
      // console.log(files.map(f =&gt; f.meta));
      setShowLoading(true);
      e.preventDefault();
      const apiUrl = "http://localhost:5000/api/movies/";
      const headers = "multipart/form-data";
      const formData = new FormData();
      formData.set("title", movie.title);
      let items = files.map(fileItem =&gt; fileItem.file);
      setPosterCollection([...posterCollection, ...items]);
      for (let img in posterCollection[0]) {
        formData.append("posters", posterCollection[0][img]);
      }
      console.log(Array.from(formData));
  
      axios.post(apiUrl, formData, headers)
      .then((result) =&gt; {
        setShowLoading(false);
        console.log(result);
        props.history.push('/show/' + result.data.movie._id)
      }).catch((error) =&gt; setShowLoading(false));
  
      // allFiles.forEach(f =&gt; f.remove());
      onSubmit();
    };
  </code></pre>
  
  <p>My route which links to my mongo model schema:</p>
  
  <pre><code>router.post('/', upload.array('file'), (req, res) =&gt; {
  
    var filenames = req.files.map(function(file) {
      return file.path; // or file.originalname
    });
  
    var a = (filenames.findIndex(function(item){
      return item.indexOf("poster")!==-1;
    }));
  
    var b = (filenames.findIndex(function(item){
        return item.indexOf("slide")!==-1;
    }));
  
    console.log(filenames);
    console.log(movieData);
  
    var date = new Date(req.body.date);
    // var isoString = date.toISOString();
  
    var movieData = {
      id: req.body.id,
      title: req.body.title,
      synopsis: req.body.synopsis,
      trailer: req.body.trailer,
      OpeningDate: date,
      poster:  filenames[a],
      slide: filenames[b]
    };
  
    let movie = new Movie(movieData);
    console.log(movie);
    movie.save()
      .then(() =&gt; res.json({ movie, msg: 'New movie added successfully' }))
      .catch(err =&gt; res.status(400).json('Unable to add this movie'))
  });
  </code></pre>
  
  <p><strong>LAST NIGHT:</strong></p>
  
  <p>I am adding react-dropzone-uploader to a project of mine, for where express/axios and multer are already setup, is it at all possible to adapt react-dropzone-uploader to work alongside?</p>
  
  <p>Get the likes of getUploadParams working with axios.post, and what field name should I call for multer, express?</p>
  
  <p>Has anyone successfully done this? I've seen other people post about it.</p>
  
  <p>My form code is here: <a href="https://codesandbox.io/s/prod-https-kgujm" rel="nofollow noreferrer">https://codesandbox.io/s/prod-https-kgujm</a></p>
  
  <p>It won't work fully, because it has local URL's. But hopefully someone can peruse, might be able to give me advice.</p>
  
  <p>Axios sections are commented out, whilst testing. Might be up for making it worth somebody's while, with a financial donation.</p>