I need to upload a file with some metadata on a json objetct using the "fetch" javascript native function in the client side and express with the multer middleware in the server side.
client:
const data = new FormData()
data.append('video', video)
data.append('userId', userId)
data.append('property', property)
fetch('/api/video', {
method: 'POST',
// headers: {
// Accept: 'application/json',
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify({ userId, property })
body: data
}).then(res => {
console.log( res )
})
server:
const express = require('express')
const multer = require('multer')
const app = express()
app.use(express.urlencoded())
app.use(express.json())
const multerUpload = multer({ dest: './videos' })
const uploadDebugged = multerUpload.single('video')
function debugMulter(req, res) {
uploadDebugged(req, res, (err) => {
console.log(req.body)
console.log('multer error:', err)
})
res.send()
}
app.post('/api/video', debugMulter)
the server log:
{ video: 'undefined', userId: '5', property: '1' }
multer error: undefined
Multer says there isn't any error but in the 'video' folder is still empty.
I'd love a solution using headers in fetch to allow json data and file post to the server.
EDIT it finally works, the video object was empty in the server side, so fetch, FormData and multer work fine.
You have to pass a FormData object to fetch to do the file upload, do not convert it to a URLSearchParams object.
Try passing uploadDebugged to the route and then access the file from req.file
const express = require('express')
const multer = require('multer')
const app = express()
app.use(express.urlencoded())
app.use(express.json())
const multerUpload = multer({ dest: './videos' })
const uploadDebugged = multerUpload.single('video')
function debugMulter(req, res) {
console.log(req.body)
console.log(req.file)
res.send()
}
app.post('/api/video', uploadDebugged, debugMulter)