Handling multipart/form-data with Deno and Oak

Question

I'm making slow but steady progress in learning Deno and Oak but this has me stumped. I have a simple web form with a file upload field:

<form method="post" action="/quote" enctype="multipart/form-data">
  <label>Author:
  <input type="text" name="author" />
  </label>
  <label>file: <input type="file" name="myfile" multiple />
  </label>
  <label>Quote: 
  <textarea name="quote"></textarea>
  </label>
  <input type="submit" />
  </form>

The processing is done with Deno and Oak and here is the script that handles the text data:

router.post('/quote', async context => {
const body = context.request.body({ type: 'form' })
  const value = await body.value
  const author = value.get('author')
  console.log(author)
  context.response.redirect(`/?author=${author}`)
})

The route can handle a form which does not have an encoding of multipart/form-data but as soon as I add that, the author field is undefined.

My question is: how can I access the data from this form (both the text and file data)?

Is there any way to handle file uploads in Oak? I've seen a couple of tutorials but they all use broken libraries. — Mark Tyers, Jan 05 '21 at 20:56

score 8 · Accepted Answer · answered Feb 20 '21 at 08:49

The solution is buried in the Oak documentation. The Request property of the Context object includes a body() method. This "resolves to a version of the request body".

It takes an options object that implements the BodyOptions interface. It has a single property called type which needs to have a value of form-data if you intend parsing multipart/form-data.

In this scenario it returns an object that implements the FormDataReader interface and this includes a read() method that resolves to an object containing the data from all the form fields, including any files uploaded.

Here is an example of how it should be implemented:

router.post('/foo', async context => {
    const body = await context.request.body({ type: 'form-data'})
    const data = await body.value.read()
    console.log(data)
    context.response.redirect('/')
})

And here is an example of the output. It includes a fields property which contains the data from the form fields and a files array which contains the data for all the files you uploaded:

{
  fields: { name: "Foo", organisation: "Bar" },
  files: [
    {
      content: undefined,
      contentType: "image/png",
      name: "myimage",
      filename: "/tmp/c8290ba0/e25ee9648e3e5db57f5ef3eb4cfa06704ce5f29c.png",
      originalName: "foobar.png"
    }
  ]
}

Why is content undefined? Shouldn't the image data be there? — chovy, Nov 21 '21 at 07:44
@chovy I was also getting 'undefined', fixed it by adding a maxSize parameter to read, like so: const data = await body.value.read({ maxSize: 10_000_000 }) — Hoff, Mar 07 '23 at 17:37

Favio Yañiquez · Answer 2 · 2021-01-20T15:01:38.240

-2

router.post('/quote', async context => {        
    let params: {[key: string]: string} = {};
    let value: any = await context.request.body().value;
    for (const [key, valor] of value) {
        params[key] = valor; 
    }
    const author = params['author']
    console.log(author)
    context.response.redirect(`/?author=${author}`)
})

edited Jan 20 '21 at 15:01

answered Jan 20 '21 at 13:48

Favio Yañiquez

1
1

2

Please explain your answer and don't just post code. It helps the person who posted the question to learn from it instead of reinforcing copy-paste coding – shyam Jan 20 '21 at 14:17
Sorry, there are many ways to access the data from a form, maybe https://stackoverflow.com/questions/62363699/how-to-access-form-body-in-oak-deno shows a more detailed answer – Favio Yañiquez Jan 20 '21 at 14:56

Handling multipart/form-data with Deno and Oak

2 Answers2