Axios + Multer Express req.file undefined

Question

I'm trying to simply upload a single file from the client (react/axios) to the server (multer / express). I've read through every "req.file undefined" and can't seem to see the same issues with my own code.

The other issue is that actually my req on the server sees the file in the "files", but multer doesn't save it and req.file is undefined.

What could be happening here?

For client I've tried both methods of sending the form data, neither work.

    const onAnalyze = async () => {
        if (selectedFile !== null) {
            //we have a file, so that's what we're sending
            var formData = new FormData();
            formData.append("analyze", selectedFile);
            //let res = await api.post('/analyze/upload', formData)
            try {
                const response = await axios({
                    method: "post",
                    url: "http://localhost:5000/analyze/upload",
                    data: formData,
                    header: { "Content-Type": "multipart/form-data" }
                });
                console.log(response)
            } catch (error) {
                console.log(error)
            }
            // console.log(res)
            // setAnalysis(res.data)
        } else if (text.length <= maxLength) {
            let res = await api.post('/analyze', { text: text })
            setAnalysis(res.data)
        }
    }

For the server it seems simple.. I just don't know. This file destination exists. req.file is always undefined

import express from 'express';
import { getMedia, createMedia } from '../controllers/media.js';
import { AnalyzeText, AnalyzeFile } from '../controllers/analyze.js'
import multer from 'multer'

const fileStorageEngine = multer.diskStorage({
    destination: "uploads",
    filename: (req, file, cb) => {
        cb(null, file.originalname)
    }
});

var upload = multer({ storage: fileStorageEngine })

const router = express.Router();

//Get All Movies and TV shows. 
router.get('/', getMedia);

//Request to create a new item based on a title
router.post('/', createMedia);

//Recuist to analyze information (not sure if this should be a post or not)
router.post('/analyze', AnalyzeText)

router.post('/analyze/upload', upload.single('analyze'), (req, res) => {
    console.log(req.file)
    res.status(200).json('well we found it again');
});

soulglider · Accepted Answer · 2022-02-12 19:16:56Z

0

Turns out I had another middleware running that was wrapping my file upload. Removed that, everything works.

answered Feb 12, 2022 at 19:16

soulglider

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tyler2P · Accepted Answer · 2022-12-28 18:02:52Z

0

If you're using react you may face this problem sending your request with axios. But I solved it by adding a name attribute to my input element. And removing the new formData method totally and passing the input.file[0] into axios, content-type multipart-formdata, and you must use the multer.diskStorage method. If not your image would be saved as text file

edited Dec 28, 2022 at 18:02

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Dec 28, 2022 at 10:44

Bimman

1

Collectives™ on Stack Overflow

Axios + Multer Express req.file undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related