title: Javascript upload excel file (XLS/XLSX)
body: <p>I'm attempting to upload an Excel spreadsheet into my React application. I don't need to read it or edit anything, I just need to upload it to a cloud storage location. I've tried using both the standard <code>&lt;input type=&quot;file&quot; /&gt;</code> and the <code>react-dropzone</code> to obtain the file (which it does), however, once I attempt to transfer the file to the back-end using <code>axios</code> the sent file comes back as <code>undefined</code>. Here's my code:</p>
  <p>Uploader Front-End</p>
  <pre><code>import React, { useState, useContext } from 'react';
  import FileContext from '../../context/file/fileContext';
  
  const Uploader = () =&gt; {
    const fileContext = useContext(FileContext);
    const { uploadFile } = fileContext;
  
    const [file, setFile] = useState('');
  
    const onChange = (e) =&gt; {
      setFile(e.target.files[0]);
    };
  
    const onSubmit = async (e) =&gt; {
      e.preventDefault();
      const formData = new FormData();
      formData.append('file', e.target.files[0]);
      uploadFile(formData);
    };
  
    return (
      &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;row&quot;&gt;
            &lt;form className=&quot;col s12&quot; onSubmit={onSubmit}&gt;
              &lt;div className=&quot;row&quot;&gt;
                &lt;div className=&quot;col s12&quot;&gt;
                  &lt;h4&gt;Upload PO file&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div className=&quot;input-field col s12&quot;&gt;
                  &lt;label className=&quot;active&quot; htmlFor=&quot;xlsFile&quot;&gt;
                    Choose an XLS/XLSX file to upload...
                  &lt;/label&gt;
                  &lt;input
                    type=&quot;file&quot;
                    name=&quot;xlsFile&quot;
                    id=&quot;xlsFile&quot;
                    accept=&quot;.xls, .xlsx&quot;
                    onChange={onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;col s12&quot;&gt;
                  &lt;button className=&quot;btn btn-primary&quot;&gt;Upload&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Uploader;
  </code></pre>
  <p><code>uploadFile()</code> function</p>
  <pre><code>const uploadFile = async (formData) =&gt; {
      const uploaded = await axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
    };
  </code></pre>
  <p>Router POST for File Upload</p>
  <pre><code>router.post('/upload', async (req, res) =&gt; {
    const { file } = req.files;
    console.log(file);
  });
  </code></pre>