multar middleware not getting triggered

Question

I'm trying to save image from react frontend to the backend but the images are not getting save,I added console logs in the multer code and I think the middleware is not getting triggered


router.post('/signup',fileUpload.single('image'),userController.signup)

multer code


const multer = require('multer')
const { v1: uuidv1, v1 } = require('uuid');

const MIME_TYPE_MAP = {
    'image/png':'png',
    'image/png':'jpeg',
    'image/png':'jpg',
};

const fileUpload = multer({
    limits:50000000,
    storage:multer.diskStorage({
        destination:(req,file,cb)=>{
            console.log(file)
            console.log('file')
            cb(null,'../upload/images')
        }, 
        filename:(req,file,cb)=>{
            console.log('file name')
            const ext = MIME_TYPE_MAP[file.mimetype]
            cb(null,v1()+'.'+ext);
        }
    }),
    fileFilter: (req,file,cb)=>{
        console.log('file filt')
        const isValid = !!MIME_TYPE_MAP[file.mimetype];
        let error  = isValid ? null : new Error('INvalid mime type')
        cb(error,isValid);
    }
});

module.exports =fileUpload;

score 0 · Answer 1 · answered Apr 24 '21 at 21:15

0

You've just set incorrect object for mime types, all props have the same key.

const MIME_TYPE_MAP = {
    'image/png': 'png',
    'image/jpeg': 'jpeg',
    'image/jpg': 'jpg',
};

Also I've seen many questions about this topic. So just use full path for destination.

I've checked this block of code, it worked perfectly and uploaded the image with uuid name.

const path = require('path');
const { v1: uuidv1, v1 } = require('uuid');

multer({
    storage: multer.diskStorage({
        destination: (req, file, cb) => {
            const filePath = path.join(__dirname, './../upload/images');
            cb(null, filePath);
        },
        filename: (req, file, cb) => {
            const ext = MIME_TYPE_MAP[file.mimetype];
            cb(null, v1() + '.' + ext);
        }
    }),
    limits: {
        fileSize: 50000000 // or 1024 * 1024 * 50 // ~50MB
    },
    fileFilter: (req, file, cb) => {
        const isValid = !!MIME_TYPE_MAP[file.mimetype];
        let error  = isValid ? null : new Error('Invalid mime type!')
        cb(error, isValid);
    },
});

answered Apr 24 '21 at 21:15

boolfalse

1,892
2
13
14

its not saving I tried the complete code , I even changed the path to full path manually ```const filePath = 'E:\\GitHub\\EventManagement\\backend\\upload\\images';``` – xAdvitya Apr 24 '21 at 23:02
I tried with ```const filePath = __dirname;``` but its still not saving – xAdvitya Apr 24 '21 at 23:12
excuse me for late.. but did you changed MIME_TYPE_MAP ? if yes, then is there some logs? what you got? please describe more, what's your file structure? node version? – boolfalse Apr 25 '21 at 00:07
yes I changed that variable with the code provided by you,I tried different file location but it was not saving so I end up using `__dirname` only but that was not working ,I got nothing in logs , node version is `15.12.0` multer is `1.4.2` – xAdvitya Apr 25 '21 at 00:15
react code for posting https://pastebin.com/pr8pwyAD – xAdvitya Apr 25 '21 at 00:22
Honestly I'm not sure about your react part, but I think that's the reason. As I understand, the backend part works fine (at least I've tested with postman), therefore you just didn't sending that image with your request. You could be sure about that with checking console.log(req.file) in the top of your signup function (when the multer is already worked). So node.js part is ok for now. Check [this](https://stackoverflow.com/questions/48284011/how-to-post-image-with-fetch) out. I think you need to [append](https://flaviocopes.com/how-to-upload-files-fetch/) that file. – boolfalse Apr 25 '21 at 01:22
I tried but not finding any solution,I think I'll not implement it – xAdvitya Apr 25 '21 at 21:42
Cheeck this out: [Simple file upload with React Fetch](https://codesandbox.io/s/lnn5pk6m) – boolfalse Apr 25 '21 at 23:30

multar middleware not getting triggered

1 Answers1