wobsoriano / h3-formidable Goto Github PK

View Code? Open in Web Editor NEW

59.0 3.0 3.0 133 KB

File upload parsing utility for h3 and Nuxt.

License: MIT License

TypeScript 93.32% JavaScript 6.68%

form h3 multipart nuxt upload

h3-formidable's Introduction

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.

Create a server middleware

import { createFileParserMiddleware } from 'h3-formidable'

export default createFileParserMiddleware({
  // formidable options
})

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 { Result } from 'h3-formidable'

  interface H3EventContext {
    formidable: Result
  }
}

License

MIT

h3-formidable's People

Contributors

Stargazers

Watchers

Forkers

abdoul-tech baboon-king friench

h3-formidable's Issues

accessing text fields from form-data not working right

Hello @wobsoriano .

Glad to see you once again building something that is always useful 🙂.

But I noticed when you try to use the readBody method from h3 to access other text fields from the form-data, it gives a whole lot of gibberish which isn't useful. This is not so surprising, because when you send data using the FormData interface, the encoding is different.

Now my question is, how do we now access data in other fields.

Does not work with netlify

I copied your stackblitz example and when i try to host it on netlify, the page is not rendering and i get this error message:

error decoding lambda response: invalid status code returned from lambda: 0

As soon as I removed the server middleware the page rendered again.

Does not work with middleware: Cannot destructure property 'files' of 'event.context.formidable' as it is undefined

I tried both copying the readme and the stackblitz example 1 to 1 but I get the following error:

[nuxt] [request error] [unhandled] [500] Cannot destructure property 'files' of 'event.context.formidable' as it is undefined.

I double checked everything and cant figure out the problem.

middleware/formidable.ts

import { createFileParserMiddleware } from 'h3-formidable'

export default createFileParserMiddleware({
  // formidable options
})

api/upload.ts

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

In contrast using no middleware works:

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

Nuxt: 3.9.0

lack of documentation

I wanted to look at an example of a working project using this package, maybe some more explaination on how to implement with nuxt or something and I found nothing. Honestly I believe this will limit adoption of this package even though it's really useful for nitro or h3 users and I don't see quite a close matchup for this library but I just don't know how to use it, how to send the data from the frontend etc. I will be doing the usual trial and error until I figure it out but I think a simple docus documentation page would do the trick

Add ability to use formidable helpers

Newer version of formidable added Helpers

It would be great to be able to use them when parsing a form.

A typical use case for this is to use the firstValues, since the default behavior in formidable is to parse everything as an array

How to get the error

I dont know how to get the error for example I set a size limit and I dont know how to get the error...

export default defineEventHandler(async (event) => {
  const { files, fields } = await readFiles(event, {
    includeFields: true,
    maxFileSize: 1024 * 1024 * 1,
  });
});

I expecting something like:

export default defineEventHandler(async (event) => {
  const { files, fields, errors } = await readFiles(event, {
    includeFields: true,
    maxFileSize: 1024 * 1024 * 1,
  });
});