title: Vue Frontend - Multer Express - Req.File is undefined
body: <p>I have been debugging this all day and am finally out of googling options.</p>
  <p>I have a Vue3 frontend that receives an image and is supposed to send said image to the backend. I have verified that the image is, in fact, being sent, but the file object in Multer is showing undefined every time regardless of what the front-end / network says is being sent.</p>
  <p>Here's my code</p>
  <p>Frontend</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;flex justify-center&quot;&gt;
      &lt;div class=&quot;mb-3 w-96&quot;&gt;
        &lt;label for=&quot;formFile&quot; class=&quot;form-label inline-block mb-2 text-gray-700&quot;
          &gt;Upload a new profile picture&lt;/label
        &gt;
        &lt;input
          class=&quot;form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none&quot;
          type=&quot;file&quot;
          @change=&quot;onSelect&quot;
          id=&quot;formFile&quot;
        /&gt;
        &lt;span class=&quot;message&quot;&gt; {{ message }} &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import axios from &quot;redaxios&quot;;
  export default {
    name: &quot;FileUpload&quot;,
    props: {
      user: Array | Object,
    },
    created() {},
    data() {
      return {
        file: &quot;&quot;,
        message: &quot;&quot;,
      };
    },
    methods: {
      onSelect(e) {
        this.file = e.target.files[0] || e.dataTransfer.files;
        if (this.file.length) return;
        const formData = new FormData();
        console.log(this.file);
        formData.append(&quot;id&quot;, this.user.id);
        formData.append(&quot;file&quot;, this.file);
        //formData.set(&quot;enctype&quot;, &quot;multipart/form-data&quot;);
        console.log(formData);
        try {
          axios
            .post(&quot;http://localhost:3669/uploadPhoto&quot;, formData)
            .then((res) =&gt; {
              this.message = &quot;Uploaded successfully!&quot;;
            });
        } catch (err) {
          console.log(err);
          this.message = &quot;Something went wrong uploading your photo!&quot;;
        }
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Backend</p>
  <pre><code>const fileFilter = (req: express.Request, file: File, cb) =&gt; {
      const allowedTypes = /jpeg|jpg|png|gif/;
      const extname = allowedTypes.test(path.extname(file.name).toLowerCase());
      const mimetype = allowedTypes.test(file.type);
      if (!mimetype &amp;&amp; extname) {
          const error = new Error(&quot;Incorrect Filetype&quot;);
          error.name = &quot;INCORRECT_FILETYPE&quot;;
          return cb(error, false);
      }
      cb(null, true);
  }
  
  const storage = multer.diskStorage({
      destination: function (req, file, cb) {
          if (req.body.id) {
              cb(null, `./public/photos/${req.body.id}`)
          } else {
              cb(null, &quot;./public/photos&quot;);
          }
      },
      filename: function (req, file: File, cb) {
        console.log(req.file);
    
        cb(null, file.name + &quot;.png&quot;);
      },
    });
  
  const imageUpload : Multer = multer({
      storage,
      limits: {
          fileSize: 5000000
      }
  });
  
  app.post('/uploadPhoto', imageUpload.single('file'), async (req: express.Request, res:express.Response) =&gt; {
      console.log(req.body);
      console.log(req.file);
      res.json({ message: 'Successfully uploaded file' });
      return;
  });
  </code></pre>
  <p>I omitted some code for space reasons, but for some reason it just won't work. Logged file returns a file, but the backend refuses to see it.</p>
  <p>Thanks</p>
  <ul>
  <li>Zach</li>
  </ul>