Multer gives me error “originalname” of undefined

JavaScript
1

I’m trying to make an image uploader but I’m getting this error whenever I try to upload an image. i think all the configurations I’ve made with multer are alright so I can’t seem to find where is the error.

I’m doing this with the multer module. If anyone can help me I would really appreciate it as I’ve been trying to solve this error for quite a while and I keep getting the same error.

server side:

const express = require('express');
const router = express.Router();
const multer  = require('multer');

const Clients = require('../models/clients.js')

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, "./uploads")
  },
  filename: (req, file, callback) => {
    callback(null, file.originalname)
  }
})

const upload = multer({storage: storage})

router.route('/').get((req, res) => {
    Clients.find()
    .then(client => res.json(client))
    .catch(err => res.status(400).json('Error:' + err))
})

router.route('/add', upload.single("articleimage")).post((req, res) => {
  
    const newClient = new Clients({
      image: req.file.originalname,
      firstName: req.body.firstName,
      lastName: req.body.lastName,
      weight: req.body.weight,
      BMI: req.body.BMI
    })
  
    newClient.save()
    .then (() => res.json(newClient))
    .catch(err => res.status(400).json('error' + err))
})

module.exports = router

Client side:

import React, {useState} from 'react'
import FileBase64 from 'react-file-base64';
import axios from 'axios'

function AddClient() {

    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [weight, setWeight] = useState('')
    const [BMI, setBMI] = useState('')
    const [image, setImage] = useState('')

    const selectedFile = (e) => {
        setImage(e.target.files[0])
    }
    console.log(image)

    const submitForm = (e) => {
        e.preventDefault()

        const formData = new FormData()

        formData.append("image", image)
        formData.append("firstName", firstName)
        formData.append("lastName", lastName)
        formData.append("weight", weight)
        formData.append("BMI", BMI)

          axios.post('http://localhost:4000/clients/add', formData)
          .then(res => console.log(res))
    }

    console.log(firstName)

    return (
        <div>
<form class="w-full max-w-lg" onSubmit={submitForm} encType="multipart/form-data">
  <div class="flex flex-wrap -mx-3 mb-6">
  <input type="file" filename="articleimage" onChange={selectedFile}/>
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
        First Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" onChange={(e) => setFirstName(e.target.value)} placeholder="First Name" />
      <p class="text-red-500 text-xs italic">Please fill out this field.</p>
    </div>
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
        Last Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" onChange={(e) => setLastName(e.target.value)} placeholder="Last Name" />
    </div>
  </div>
  <div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
        Weight
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" onChange={(e) => setWeight(e.target.value)} placeholder="Weight" />
      <p class="text-red-500 text-xs italic">Please fill out this field.</p>
    </div>
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
        Body Mass Index (BMI)
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" onChange={(e) => setBMI(e.target.value)} placeholder="BMI" />
    </div>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add Client</button>
  </div>
</form>

        </div>
    )
}

export default AddClient
2

If the error is “cannot read property “originalname” of undefined”, that means that somewhere in your code you are using .originalname and when it runs the value that you are calling that on doesn’t exist. It could be a timing issue with asynchronous code, it could be a spelling error, or it could be a logical error.

The error message probably tells you exactly which line that is happening on, so you can figure out which use of .originalname is causing the problem.

1 Like
3

What do you get when you log out req.file?

Might not be it but what happens if you move upload.single to the post call?

router.route('/add').post(upload.single('articleimage'), (req, res) => {
  // ...code
});
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.