multer doesn't save file to disk

[niklasgrewe]

Hi, i want to use multer in my custom api route to handle file uploads. My custom route looks something like this:

import { BlitzApiRequest, BlitzApiResponse } from "@blitzjs/core"
import multer from "multer"
import path from "path"

const storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, path.join(process.cwd(), "uploads"))
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + "-" + Date.now() + path.extname(file.originalname))
  },
})

const upload = multer({ storage })

function runMiddleware(req: BlitzApiRequest, res: BlitzApiResponse, fn: Function) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }
      return resolve(result)
    })
  })
}

type BlitzApiRequestWithFormData = BlitzApiRequest & {
  files: any[]
}

export const config = {
  api: {
    bodyParser: false,
  },
}

const avatarUpload = async (req: BlitzApiRequestWithFormData, res: BlitzApiResponse) => {
  await runMiddleware(req, res, upload.any()) // upload.single("file") not working
  console.log(req.files)
  res.status(200).json({ msg: "works" })
}
export default avatarUpload

when i upload a file i can see the valid output coming from req.files:

{
    fieldname: 'avatar',
    originalname: 'image.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: '/path/to/project/uploads',
    filename: 'avatar-1622456775867.jpg',
    path: '/path/to/project/uploads/avatar-1622456775867.jpg',
    size: 128521
  }

i get the file path, but multer doesn't save the file in this directory. The path doesn't exist. I don't know where is my mistake. Any ideas, how can i solve this?

[flybayer]

Hey, I've never used multer so not sure how to help. Have you asked for help from the multer folks?

[MrLeebo]

You created the /uploads folder and the process running the web server has permission to write to that folder, correct?

[zanami]

I'm running similar code with blitz dev and can confirm there's a problem.
multer works and produces something like this (using upload.single('avatar') and storage setup as above)

console.log(req.file)
{
    fieldname: 'avatar',
    originalname: 'image.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: '/path/to/project/uploads',
    filename: 'avatar-1622456775867.jpg',
    path: '/path/to/project/uploads/avatar-1622456775867.jpg',
    size: 128521
  }

But it actually puts the file to /path/to/project/.blitz/build/uploads/avatar-1622456775867.jpg

try this and console.log the response in frontend

res.status(200).json({path: req.file.path })

Bonus: you can simply set destination: './public' then multer saves the file and appends req.file like this

{
  fieldname: 'avatar',
  originalname: 'unnamed.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: './public',
  filename: 'avatar-1623336608015.png',
  path: 'public/avatar-1623336608015.png',
  size: 38736
}

res.status(200).json({path: req.file.path }) also returns 'public/avatar-1623336608015.png' in this case

and actual file can be found in /path/to/project/.blitz/build/public/

In plain next-js the code above works as expected (tried with next dev) you just have to upload to ./public or ./public/, I believe.