request.file: Unable to pull in a file submitted through axios

[tafadzwagonera]

I've a front-end app submitting a file through the following code:

...async ({ commit }, form) => {
  const formData = new FormData()

  Object.entries(form).forEach(([key, val]) => {
    formData.append(key, val)
  })

  const response = await api.post(pathname, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
  })

  const { status, data } = response
}

And this function on the end of the wire listening for a file submission

public async create({ request, response }) {
  const { title, description } = request.all()

  const meme = request.file('file', {
    size: '160kb',
    extnames: ['jpg', 'jpeg', 'png', 'gif'],
  })

 console.log(meme)
   ...
}

meme keeps logging null meaning "...no file was uploaded." as per the docs. console.log(request.all()) does show a file object so perhaps that checks out.

1. I've stepped through every line and ensured that data is passing through.
2. I read https://docs.adonisjs.com/guides/file-uploads and am not sure request.file works wih xmlhttprequest
3. I can't find a question in the same vein on Google. Maybe I'm doing something wrong?

[tafadzwagonera]

I wasn't aware that <input type="file"> "lets you access the list of files selected ... dropped into web content when using the drag and drop API" https://developer.mozilla.org/en-US/docs/Web/API/FileList

All I had to do was destructure the incoming form data as per the following

...async ({ commit }, form) => {
    const { files: [image,], ...rest } = form
    const meme = { image, ...rest }
    ...
    const formData = new FormData()
}