WaspW
Wasp•3y ago
Gwaggli

File-Upload using a custom API

I am trying to setup a file upload using the custom apis.
First i setup the fileupload-express middleware like this:
import fileUpload from 'express-fileupload'
import { ServerSetupFn } from '@wasp/types'

const serverSetup: ServerSetupFn = async ({ app }) => {
    console.log('Setting up server...')
    app.use(fileUpload({ createParentPath: true }))
}

export default serverSetup

Which is called on startup. (confirmed via the console log statement)
But the files and the body property stay empty no matter what.
export const fileUpload = (req, res, context) => {
    console.log(req.get('Content-Type'))
    console.log(req.body)
    console.log(req.files)
    res.json({ msg: `Hello, ${context.user?.email || "stranger"}!` })
}

Eventho the content type is defined as multipart/form-data and tried this with from within the webapp as well as directly from postman.

Any ideas why this might not be working?

The webapp code looks like this:
const uploadFile = async (data: FormData) => {
    const res = await api.post(`/api/fileupload`, data, { headers: { 'Content-Type': 'multipart/form-data' } })
    console.log(res.data)
}

// ...

const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const data = new FormData()
    data.append('file', event.currentTarget.file.files[0])
    await uploadFile(data)
}
Was this page helpful?