File upload parsing utility for h3 and Nuxt.
npm install h3-formidable !NPM
File upload parsing utility for h3 and Nuxt using formidable.
Demo - https://stackblitz.com/edit/nuxt-starter-ykuwmn
``bash`
npm install h3-formidable
This example shows Nuxt usage but you can use it with any h3 app.
1. Create a server middleware
`ts
import { createFileParserMiddleware } from 'h3-formidable'
export default createFileParserMiddleware({
// formidable options
})
`
2. Access files in your api route
`ts`
export default eventHandler(async (event) => {
const { files } = event.context.formidable
})
or you can ditch server middleware and parse files per api route...
`ts
import { readFiles } from 'h3-formidable'
export default eventHandler(async (event) => {
const { fields, files, form } = await readFiles(event, {
// formidable options
// https://github.com/node-formidable/formidable#options
})
})
`
If you have a custom plugin, you can use the getForm option to access the incoming form and do whatever you want with it.
`ts`
export default eventHandler(async (event) => {
const { fields, files } = await readFiles(event, {
getForm(form) {
form.use(() => {
console.log('woohoo, custom plugin')
})
}
})
})
Anything inside the getForm callback will be executed before the form is parsed.
`ts
import { firstValues, readBooleans } from 'h3-formidable/helpers'
export default eventHandler(async (event) => {
const { fields, files, form } = await readFiles(event)
// Gets first values of fields
const exceptions = ['thisshouldbeanarray']
const fieldsSingle = firstValues(form, fields, exceptions)
// Converts html form input type="checkbox" "on" to boolean
const expectedBooleans = ['checkbox1', 'wantsNewsLetter', 'hasACar']
const fieldsWithBooleans = readBooleans(fieldsSingle, expectedBooleans)
})
`
`ts
declare module 'h3' {
import type { FieldsAndFiles } from 'h3-formidable'
interface H3EventContext {
formidable: FieldsAndFiles
}
}
``
MIT