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)?
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"
}
]
}