h3-formidable

h3-formidable

File upload parsing utility for h3 and Nuxt using formidable.

Demo - https://stackblitz.com/edit/nuxt-starter-ykuwmn

Install

npm install h3-formidable

Usage

This example shows Nuxt usage but you can use it with any h3 app.

1. Create a server middleware

import { createFileParserMiddleware } from 'h3-formidable'

export default createFileParserMiddleware({
  // formidable options
})

1. Access files in your api route

export default eventHandler(async (event) => {
  const { files } = event.context.formidable
})

or you can ditch server middleware and parse files per api route...

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
  })
})

Plugins

If you have a custom plugin, you can use the getForm option to access the incoming form and do whatever you want with it.

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.

Helpers

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)
})

TypeScript Shim

declare module 'h3' {
  import type { FieldsAndFiles } from 'h3-formidable'

  interface H3EventContext {
    formidable: FieldsAndFiles
  }
}

License

MIT