title: How can I use formdata with axios post without 500 error code?
body: <pre><code>import React ,{useContext, useState, useEffect} from 'react'
  import axios from 'axios'
  import {Container,Form,Row,Col,Figure,Table,Card,ListGroup, Spinner,Badge, Accordion,Button} from 'react-bootstrap'
  import ImageUpload from '../../shared/components/FormElements/ImageUpload'
  import Input from '../../shared/components/FormElements/Input'
  import {useForm} from '../../shared/hooks/form-hooks'
  import {VALIDATOR_MINLENGTH,VALIDATOR_EMAIL, VALIDATOR_REQUIRE}  from '../../shared/util/validators'
  import './NewRecipe.css'
  import Ingredient from './Ingredient'
  import Instruction  from './Instruction'
  import {AuthContext} from '../../shared/context/auth-context'
  
  
   const NewRecipe = props =&gt; {
      const auth  = useContext(AuthContext)
  
      const [formState,inputHandler, setFormData]= useForm({
        title:{
          value:&quot;&quot;,
          isValid:false
        },
        image:{
          value:null,
          isValid:false
        },
        readyInMinutes:{
          value:&quot;&quot;,
          isValid:false
        },
        servings:{
          value:&quot;&quot;,
          isValid:false
        },
        price:{
          value:&quot;&quot;,
          isValid:false
        },
        ingredients:[{
          name:{
              value:&quot;&quot;,
              isValid:false
            },
            amount:{
              value:&quot;&quot;,
              isValid:false
            },
            measure:{
              value:&quot;&quot;,
              isValid:false
            }
        }
        ],
        instructions:[
            {
              content:{
                  value:&quot;&quot;,
                  isValid:false
                }
            }
        ]
       
  
      },false)
      const [ingredients,setIngredients] = useState([])
      const [ingredientCount,setIngredientCount] = useState(0)
      const [instructionCount, setInstructionCount] = useState(0)
      const [instructions, setInstructions] = useState([])
  
          
      const addIngredient = () =&gt; {
          setIngredientCount(ingredientCount=&gt; ingredientCount + 1)
          setIngredients(prev =&gt; [...prev,ingredientCount])
      }
      const addInstruction = () =&gt; {
          setInstructionCount(instructionCount =&gt; instructionCount + 1)
          setInstructions(prev =&gt; [...prev, instructionCount])
      }
      const handleIngredientRemove = (index) =&gt; {
          setIngredients(ingredients.filter(ingredient =&gt; ingredient !== index))
          setIngredientCount(ingredientCount =&gt; ingredientCount - 1)   
      }
      const handleInstructionRemove = (index) =&gt; {
          setInstructions(ingredients.filter(ingredient =&gt; ingredient !== index))
          setInstructionCount(ingredientCount =&gt; ingredientCount - 1)  
      }
      const handleSubmit =  (e) =&gt; {
          e.preventDefault()
          setFormData({...formState.inputs},false)
          
  
          try{
              console.log(formState.inputs)
              const formData = new FormData()
              const my_ingredients = new Array()
              const my_instructions = new Array()
          
              my_ingredients.push({name:formState.inputs.iName.value,amount:parseFloat(formState.inputs.amount.value),measure:formState.inputs.measure.value})
              console.log(my_ingredients)
             
              my_instructions.push({content:formState.inputs.content.value})
              
              formData.append('title',formState.inputs.title.value)
              formData.append('readyInMinutes',parseFloat(formState.inputs.readyInMinutes.value))
              formData.append('servings',parseFloat(formState.inputs.servings.value))
              formData.append('price',parseFloat(formState.inputs.price.value))
              formData.append('ingredients',JSON.stringify(my_ingredients))
              formData.append('instructions',JSON.stringify(my_instructions))
              formData.append('image',formState.inputs.image.value)
              console.log(formData.get('ingredients'))
              console.log(formData.get('instructions'))
              console.log(formData.get('image'))
              console.log(formData.get('price'))
              console.log(formData.get('servings'))
              console.log(formData.get('title'))
             
              const responseData =  axios.post(
                  process.env.REACT_APP_BACKEND_URL+'/recipes/new',
                   formData,{
                   headers: {&quot;Authorization&quot; : `Bearer ${auth.token}`} })
          
              console.log(responseData)
              console.log('2g')
              
             
            
          }
          catch(err){
             console.log(err.message)
          }
      }
  
      return (
          &lt;div className='recipe-main'&gt;
              &lt;h3&gt;-&lt;/h3&gt;
              &lt;Container className='new-recipe-container' &gt;
                  
                  &lt;Card  border=&quot;secondary&quot; className='recipe-form'&gt;
                      &lt;Form className='form-container' &gt;
                          &lt;Input 
                              element='input'
                              type='text'
                              id='title'
                              name='title'
                              label='Title'
                              validators={[VALIDATOR_REQUIRE()]}
                              errorText='Please enter a title...'
                              placeholder='Please enter a title...'
                              onInput={inputHandler} /&gt;
                          &lt;Input 
                              element='input'
                              type='number'
                              id='readyInMinutes'
                              name='readyInMinutes'
                              label='ReadyInMinutes'
                              validators={[VALIDATOR_REQUIRE()]}
                              errorText='Please enter a readyInMinutes...'
                              placeholder='Please enter a readyInMinutes...'
                              onInput={inputHandler} /&gt;    
                          &lt;ImageUpload
                                  id='image' 
                                  name='image'
                                  validators={[VALIDATOR_REQUIRE()]}
                                  errorText='Please import an image file.'
                                  onInput={inputHandler}
                                  
                          /&gt;
                          &lt;Button className='increment-btn' variant=&quot;warning&quot; size=&quot;lg&quot; block onClick={addIngredient}&gt;
                              Add Ingredient
                          &lt;/Button&gt;
                          {ingredients.map(index =&gt; {
                              return ( &lt;Ingredient  key={index} onInputHandler={inputHandler} deleteIngredientHandler={() =&gt; handleIngredientRemove(index)} iId={index} /&gt;)
                          }
                          )}
                         
                          &lt;Input 
                              element='input'
                              type='number'
                              id='servings'
                              name='servings'
                              label='Servings'
                              validators={[VALIDATOR_REQUIRE()]}
                              errorText='Please enter a servings...'
                              placeholder='Please enter a servings...'
                              onInput={inputHandler} /&gt;
                          &lt;Input 
                              element='input'
                              type='number'
                              id='price'
                              name='price'
                              label='Price'
                              validators={[VALIDATOR_REQUIRE()]}
                              errorText='Please enter a price...'
                              placeholder='Please enter a price...'
                              onInput={inputHandler} /&gt;
                          &lt;Button className='increment-btn' variant=&quot;warning&quot; size=&quot;lg&quot; block onClick={addInstruction}&gt;
                              Add Instruction
                          &lt;/Button&gt;
                          {instructions.map(index =&gt; {
                              return   &lt;Instruction key={index} iId={index} onInputHandler={inputHandler} deleteInstruction={() =&gt; handleInstructionRemove(index)} /&gt;
                          })}
                      &lt;Button  type='submit' className='submit-btn' size=&quot;lg&quot; block  onClick={handleSubmit}&gt;Add Recipe&lt;/Button&gt;
                      &lt;/Form&gt;
                  &lt;/Card&gt;
              &lt;/Container&gt;
          &lt;/div&gt;
      )
  }
  export default NewRecipe
  
  </code></pre>
  <p>I would like to ad my multipart/formdata with axios post and  authenticatiomn. I do not get any authentication error but i get 500 status code for server. Basically, I have my own api and want to post data to my own api. I am stuck in this. Thanks for your help from now. enter image description here</p>
  <p>recipe model</p>
  <pre><code>const mongoose = require('mongoose')
  const uniqueValidator = require('mongoose-unique-validator')
  
  
  const commentSchema = new mongoose.Schema({
    user: {
      type: mongoose.Schema.ObjectId,
      ref: 'User',
      required: true
    },
    content: {
      type: String,
      required: true,
      maxLength: 280
    }
  }, {
    timestamps: true, // this adds `createdAt` and `updatedAt` properties
    toJSON: {
      // whenever the comment is converted to JSON
      transform(doc, json) {
        delete json.__v
        return json
      }
    }
  })
  const recipeSchema = new mongoose.Schema({
    title:{
      type:String,
      required:true
    },
    image:{
      type:String,
      required:true
    },
    ingredients:[{
      name:{
        type:String,
        required:true
      },
      image:{
        type:String,
        required:true
      },
      amount:{
        type:Number,
        required:true
      },
      measure:{
        type:String,
        required:true
      }
    }],
    instructions:[{
      content:{
        type:String,
        required:true
      }
    }],
    readyInMinutes:{
      type:Number,
      required:true
    },
    servings:{
      type:Number,
      required:true
    },
    ratings:[{
      point:{
        type:Number,
        required:true
      }
    }],
    creator:{
      type:mongoose.Types.ObjectId,
      required:true,
      ref:'User'
    },
    comments:[commentSchema],
    nutrients:[{
      name:{
        type:String,
        required:true
      },
      amount:{
        type:Number,
        required:true
      }
    }],
    price:{
      type:Number,
      required:true
    }
  
  
  })
  recipeSchema.plugin(uniqueValidator)                                            //We plugin wiht mogooseValidator with our schema.
  module.exports = mongoose.model('Recipe',recipeSchema)                          //We called User model with recipeSchema
  
  
  
  
  
  
  
  
  
  </code></pre>
  <p>recipe cotroller.js</p>
  <pre><code>const HttpError = require('../models/HttpError')
  const bcrypt = require('bcryptjs')
  const jwt= require('jsonwebtoken')
  const Recipe = require('../models/Recipe')
  const User = require('../models/User')
  const {validationResult} = require('express-validator')
  const mongoose = require('mongoose')
  const uuid = require('uuid/v4')
  const fs = require('fs')
  const path = require('path')
  
  const getAllRecipes = async (req, res, next) =&gt; {                               //We get all recipes to show users' recipes
     let recipes
     try{
       recipes = await Recipe.find({}).exec()
     }
     catch(err){
       const error = new HttpError('Something went wrong',500)
       return next(error)
     }
     if(!recipes){
       const error = new HttpError('Could not find any recipe',404)
       return next(error)
     }
  
     res.status(200).json({recipes:recipes.map(recipe =&gt; recipe.toObject({getters:true}))})
  }
  const getRecipesByUserId = async (req, res, next) =&gt; {                          // We want to get recipes by userId, so we can show user's recipes
     const userId = req.params.uid
     let existingUser
     try{
        existingUser = await User.findById(userId).populate('recipes')
     }
     catch(err){
       const error = new HttpError('Could not find any recipes provided user id',500)
       return next(error)
     }
     if(!existingUser){                                                           // We check if this user exist or not in our database.
       const error = new HttpError('Could not find any user provided user id',404)
       return next(error)
     }
     res.status(200).json({recipes:existingUser.recipes.map(recipe =&gt; recipe.toObject({getters:true}))})
  }
  const createRecipe = async (req, res, next) =&gt;{                                 //We create a new recipe
    const errors = validationResult(req)
    if(!errors.isEmpty()){
      const error = new HttpError('Invalid inputs passed, please check your data.',422)
      return next(error)
    }
    const {title,ingredients,instructions,readyInMinutes, servings, ratings,comments, nutrients,price} = req.body
  
    const createdRecipe = new Recipe({
      title,
      image:req.file.path,
      ingredients,
      instructions,
      readyInMinutes,
      servings,
      ratings:[],
      creator:req.userData.userId,
      comments:[],
      nutrients:[],
      price
    })
    let user
    try{
      user = await User.findById(req.userData.userId)                             // When we add a new recipe we need user's recipes array,too.That's why We need user who add this recipe.
    }
    catch(err){
      const errors = new HttpError('Something went wrong',500)
      return next(error)
    }
    if(!user){
      const error = new HttpError('This user does not exist',422)
      return next(error)
    }
    try{                                                                          // We need to do this.Because When we add a new recipe that affect user's recipes array, too.We want to make sure to add this recipe both collections.
        const sess = await mongoose.startSession()
        sess.startTransaction()
        await  createdRecipe.save({session:sess})
        user.recipes.push(createdRecipe)
        await user.save({session:sess})
        await sess.commitTransaction()
    }
    catch(err){
      const error = new HttpError('Created recipe failed, please create again',500)
      return next(error)
    }
    res.status(201).json({recipe:createdRecipe})
  }
  const updateRecipe = async (req, res, next) =&gt; {                             
    const errors = validationResult(req)
    if(!errors.isEmpty()){
      const error = new HttpError('Invalid inputs passed, please check your data.',422)
      return next(error)
    }
    const recipeId  = req.params.rid
    let existingRecipe
    try
    {
      existingRecipe = await Recipe.findById(recipeId).populate('creator')
    }
    catch(err){
      const error = new HttpError('Something went wrong could not update place', 500)
      return next(error)
     }
     if(existingRecipe.creator.id !== req.userData.userId){                       // We want to know that creator and currentUser same person or not.
        const error = new HttpError('You are not allowed to update this recipe ',403)
        return next(error)
     }
      const {title,ingredients,instructions,readyInMinutes, servings, nutrients,price} = req.body
      existingRecipe.title = title
      existingRecipe.image = req.file.path
      existingRecipe.ingredients= ingredients
      existingRecipe.instructions = instructions
      existingRecipe.readyInMinutes = readyInMinutes
      existingRecipe.servings = servings
      existingRecipe.nutrients  = nutrients
      existingRecipe.price = price
      try{
        await existingRecipe.save()
      }
      catch(err){
        const error = new HttpError('Something went wrong could not update recipe', 500)
        return next(error)
       }
       res.status(200).json({recipe:existingRecipe.toObject({getters:true})})
  }
  const deleteRecipe = async (req, res, next) =&gt; {
    const recipeId = req.params.rid
    let recipe
    try{
      recipe = await Recipe.findById(recipeId).populate('creator')
    }
    catch(err){
      const error  = new HttpError('Something went wrong',500)
      return next(error)
    }
    if(!recipe){
      const error = new HttpError('This recipe does not exist',404)
      return next(error)
    }
    if(recipe.creator.id !== req.userData.userId){                                // We want to know that creator and currentUser same person or not.
      const error = new HttpError('You are not allowed to delete this recipe',403)
      return next(error)
    }
    const imagePath = recipe.image
    try{
      const sess = await mongoose.startSession()
      sess.startTransaction()
      await recipe.remove({session:sess})
      recipe.creator.recipes.pull(recipe)
      await recipe.creator.save({session:sess})
      await sess.commitTransaction()
    }
    catch(err){
      const error  = new HttpError('Something went me wrong',500)
     return next(error)
    }
    fs.unlink(imagePath, err =&gt; {
      console.log(err);
    })
  
       res.status(200).json({message:'Deleted recipe'})
  }
  
  
  exports.getAllRecipes = getAllRecipes
  exports.getRecipesByUserId = getRecipesByUserId
  exports.createRecipe = createRecipe
  exports.updateRecipe = updateRecipe
  exports.deleteRecipe = deleteRecipe
  
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/QD1mb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QD1mb.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/Ta6Pn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ta6Pn.png" alt="enter image description here" /></a></p>
  <p>Here's my dev tools newtwork tab with my request headers</p>