Trying to upload with multer but req.file is undefined?

Hi guys, I’m trying to upload a photo using multer but i keep getting an error saying that it cannot read property of filename of undefined and when Iog out req.file it comes out as undefined. Can you help with this issue?

addRecipeForm.vue

<template>
  <div id="create-page">
    <h1>Add New Recipe</h1>
    <router-link id="home" :to="'/'">Home Page</router-link>
    <div id="confirmation-message" v-if="showConfirmationMessage">
      Successfully Added Recipe
    </div>

    <ul id="create-errors" v-if="errors">
      <li class="error" v-for="(error, index) in errors" :key="index">
        {{ error.toString() }}
      </li>
    </ul>

    <form id="addRecipeForm" encType="multipart/form-data">
      <label for="file"></label>
      <input
        id="imageUrl"
        name="file"
        ref="file"
        type="file"
        @change="selectFile"
      />

      <label for="title"></label>
      <input
        id="title"
        type="text"
        placeholder="Recipe Title"
        v-model="recipe.title"
      />

      <label for="ingrediants"></label>
      <textarea
        id="ingrediants"
        placeholder="ex: Ingrediant, Ingrediant"
        v-model="recipe.ingrediants"
      />

      <label for="instructions"></label>
      <textarea
        id="instructions"
        placeholder="ex: 1. Instrcution, 2. Instruction"
        v-model="recipe.instructions"
      />

      <button id="added-recipe" @click="addRecipe">Delicious!</button>
    </form>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "",
  data() {
    return {
      file: "",
      errors: null,
      showConfirmationMessage: false,
      recipe: {
        title: "",
        ingrediants: "",
        instructions: "",
        imageUrl: "",
      },
    };
  },
  methods: {
    selectFile() {
      const file = this.$refs.file.files[0];
      this.file = file;
    },

    addRecipe() {
      const formData = new FormData();
     this.recipe.imageUrl = formData.append("file", this.file);
      this.$store.dispatch("newRecipe", this.recipe);
      this.showConfirmationMessage = true;
      this.recipe = "";
      setTimeout(() => (this.showConfirmationMessage = false), 2000);
    },
  },
};
</script>

vuex

newRecipe(context, recipe) {
          axios.post(apiUrl + "newRecipe", {
            "title": recipe.title,
            "ingrediants": recipe.ingrediants,
            "instructions": recipe.instructions,
            "imageUrl": recipe.imageUrl,
          }
          )
            .catch((err) => console.log(err.message));

        },

recipes-api

router.post('/:newRecipe', upload.single('file'), (req, res, next) => {
    console.log(req.file);
    let path = "/public/images" + req.file.filename;
    const recipe = {
        title: req.body.title,
        ingrediants: req.body.ingrediants,
        instructions: req.body.instructions,
        imageUrl: path
    }
    RecipeService.create(recipe)
        .then((recipe) => {
            res.status(200);
            res.send(JSON.stringify(recipe));
            console.log(`Added recipe ${recipe}`);
        }).catch((err) => {
            res.status(404);
            res.send();
        });
});

recipesController

var multer = require('multer');

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'public/images')
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + "-" + file.originalname)
    }
})

const imageFilter = function (req, file, cb) {
    if (file.originalname.match(/\.(jpg|jpeg|png|gif)$/)) {
        cb(null, true);
    } else {
        cb(new Error("OnlyImageFilesAllowed"), false);
    }
}

Can you supply the error. You’ve posted a lot of code and we have no idea where the stack trace leads to. It could be as simple as the fact that you haven’t declared imageUrl as a variable in your addRecipe function: imageUrl = formData.append("file", this.file);

declared imageUrl now and it still happens. I also edited my code above to show what I currently have.

this is my error on line 57 in recipes-api.js

TypeError: Cannot read property 'filename' of undefined
    at /Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/recipes-api.js:57:42
    at Layer.handle [as handle_request] (/Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/express/lib/router/route.js:137:13)
    at multerMiddleware (/Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/multer/lib/make-middleware.js:18:41)
    at Layer.handle [as handle_request] (/Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/express/lib/router/layer.js:95:5)
    at /Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/express/lib/router/index.js:281:22
    at param (/Users/pllealfunes/Documents/Projects/gh-recipes-mevn/recipes-mevn/server/node_modules/express/lib/router/index.js:360:14)