CODEWITHSUNDEEP
expressfile-uploadaxiosmulter
soulglider
soulglider

Reputation: 21

Axios + Multer Express req.file undefined

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');
});

Upvotes: 2

Views: 1263

Answers (2)

Bimman
Bimman

Reputation: 1

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

Upvotes: 0

soulglider
soulglider

Reputation: 21

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

Upvotes: 0

Related Questions