Array of object with file and a string field throwing "string field must be defined" message always. #4777

mdthansil · 2024-10-26T15:31:30Z

Package version

Adonis Core Version: 6.14.1, vineJS version: 2.1.0

Describe the bug

Using Adonisjs with inertia + vue(SSR)

// router.ts
router.post('/upload', async ({ request, response }) => {
  const data = await request.validateUsing(
    vine.compile(
      vine.object({
        images: vine.array(vine.object({ file: vine.file({ size: '2mb' }), title: vine.string() })),
      })
    )
  )
  return response.json(data)
})

//home.vue
<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3'

const getError = (error: any, key: string) => {
  return error?.[key]?.join(',')
}

const form = useForm<{
  images: { file: File | undefined; title: string }[]
}>({
  images: [{ file: undefined, title: '' }],
})
</script>

<template>
  <Head>
    <title>Home</title>
  </Head>
  <h1>Form</h1>
  <div>
    <form
      @submit.prevent="form.post('/upload')"
      style="display: flex; flex-direction: column; gap: 1rem; padding: 3rem"
    >
      <template v-for="(_, index) in form.images" :key="index">
        <input type="text" placeholder="Title" v-model="form.images[index].title" />
        <span>{{ getError(form.errors, `images.${index}.title`) }}</span>
        <input
          type="file"
          @input="form.images[index].file = ($event.target as HTMLInputElement)?.files?.[0]"
        />
        <span>{{ getError(form.errors, `images.${index}.file`) }}</span>
      </template>
      <button type="button" @click="form.images.push({ file: undefined, title: '' })">
        Add image
      </button>
      <button type="submit" :disabled="form.processing">Submit</button>
    </form>
  </div>
</template>
`

//Respone
"props": {
        "errors": {
            "images.0.title": [
                "The title field must be defined"
            ],
            "images.1.title": [
                "The title field must be defined"
            ],
            "images.2.title": [
                "The title field must be defined"
            ]
        }
    },

Reproduction repo

No response

RomainLanz · 2024-10-26T16:50:58Z

Hey @mdthansil! 👋🏻

What's the content of request.all() in your controller?

mdthansil · 2024-10-26T17:41:09Z

Hey @mdthansil! 👋🏻

What's the content of request.all() in your controller?

When I use console.log(request.all()), I'm getting the following.

{
  images: [ { title: 'Title 1' }, { title: 'Title 2' }, { title: 'Title 3' } ]
}

mdthansil · 2024-10-27T16:17:37Z

Hi @RomainLanz any updates on this?

RomainLanz · 2024-10-28T08:06:59Z

It looks like if should work fine.
Could you create a repository with the minimum amount of code to reproduce the issue?

mdthansil · 2024-10-28T09:39:26Z

hi @RomainLanz

Here is the link to the repository.
https://github.com/mdthansil/adonisjs-inertial-multi-fileupload

mdthansil · 2024-10-30T03:55:58Z

Hey @RomainLanz 👋

Please note that

The issue only occurs when we use vine.file() together with other types like vine.string(). There is no problem with other combination; it works perfectly fine. For example, this setup:

tags: vine.array(vine.object({ key: vine.string(), value: vine.string() }))

functions correctly. However, when we attempt something like this:

images: vine.array(vine.object({ file: vine.file({ size: '2mb' }), title: vine.string() }))

we receive an error stating that the field must be defined.

thetutlage · 2024-10-31T05:55:54Z

I think this issue was reported earlier as-well (maybe in the Discord). The files and the request body are two different objects and hence when you expect them to be present together than you will have to self define the data property for validation and deep merge request.all and request.files.

For example, you can use the deepmerge package from npm and use it follows.

import merge from 'deepmerge'

request.validateUsing(validator, {
  data: merge(request.all(), request.allFiles())
})

ThisIsMissEm · 2025-01-05T01:02:39Z

Try setting enctype on the form to "multipart/form-data" then you should get both the file and title, per: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

This form is currently submitting as application/x-www-form-urlencoded

github-actions · 2025-01-27T00:49:38Z

This issue has been marked as stale because it has been inactive for more than 21 days. Please reopen if you still need help on this issue

dunhamjared · 2025-02-05T23:03:33Z

Just ran into this issue.

@thetutlage is correct, you would have to deep merge the request all() and allFiles() objects.

@ThisIsMissEm -- setting the enctype to multipart/form-data did not resolve the issue for me.

Source

Here is the code @thetutlage may be referencing:

core/modules/http/request_validator.ts

Lines 81 to 87 in 17798dd

    
           const data = validatorOptions.data || { 
        
             ...this.#ctx.request.all(), 
        
             ...this.#ctx.request.allFiles(), 
        
             params: this.#ctx.request.params(), 
        
             headers: this.#ctx.request.headers(), 
        
             cookies: this.#ctx.request.cookiesList(), 
        
           }

Example

If both all() and allFiles() had the following objects:

const data = { 
   ...this.#ctx.request.all(),      // { foo: { name: bar }}
   ...this.#ctx.request.allFiles(), // { foo: { file: MultipartFile }}
}

The const data would then be:

{ foo: { file: MultipartFile }}

But we expected:

{ foo: { name: bar, file: MultipartFile }}

dunhamjared · 2025-02-05T23:37:53Z

The bodyparser request toJSON() seems to separate the body and files, like so:

toJSON {
  id: 'example',
  url: '/foo/1/bar/2',
  query: null,
  body: { title: 'asdf', description: null }, // <--
  params: { space: '1', item: '2' },
  headers: { host: 'localhost:3333' },
  method: 'PUT',
  protocol: 'http',
  hostname: 'localhost',
  ip: '::1',
  subdomains: {},
  files: { custom: { asdf: [MultipartFile] } } // <--
}

With that in mind, could we instead update the code to this?

const data = validatorOptions.data || { 
  ...this.#ctx.request.all(), 
  files: this.#ctx.request.allFiles(), // <-- Files under its own 'file' key
  params: this.#ctx.request.params(), 
  headers: this.#ctx.request.headers(), 
  cookies: this.#ctx.request.cookiesList(), 
}

Or possibly implement the deep merge into the validateUsing method?

thetutlage · 2025-02-06T03:34:15Z

Deep merging will be implemented, but since it will be a breaking change, this has to wait a little :)

mdthansil changed the title ~~Array of object with file and a string field throwing "string field must be defined" message.~~ Array of object with file and a string field throwing "string field must be defined" message always. Oct 26, 2024

thetutlage self-assigned this Nov 5, 2024

thetutlage added the Type: Enhancement Improving an existing feature label Nov 5, 2024

github-actions bot added the Stale label Jan 27, 2025

thetutlage removed the Stale label Jan 27, 2025

thetutlage added the Semver: Major Has breaking changes label Feb 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Array of object with file and a string field throwing "string field must be defined" message always. #4777

Array of object with file and a string field throwing "string field must be defined" message always. #4777

mdthansil commented Oct 26, 2024 •

edited

Loading

RomainLanz commented Oct 26, 2024

mdthansil commented Oct 26, 2024

mdthansil commented Oct 27, 2024

RomainLanz commented Oct 28, 2024

mdthansil commented Oct 28, 2024 •

edited

Loading

mdthansil commented Oct 30, 2024

thetutlage commented Oct 31, 2024

ThisIsMissEm commented Jan 5, 2025

github-actions bot commented Jan 27, 2025

dunhamjared commented Feb 5, 2025

dunhamjared commented Feb 5, 2025 •

edited

Loading

thetutlage commented Feb 6, 2025

Array of object with file and a string field throwing "string field must be defined" message always. #4777

Array of object with file and a string field throwing "string field must be defined" message always. #4777

Comments

mdthansil commented Oct 26, 2024 • edited Loading

Package version

Describe the bug

Reproduction repo

RomainLanz commented Oct 26, 2024

mdthansil commented Oct 26, 2024

mdthansil commented Oct 27, 2024

RomainLanz commented Oct 28, 2024

mdthansil commented Oct 28, 2024 • edited Loading

mdthansil commented Oct 30, 2024

thetutlage commented Oct 31, 2024

ThisIsMissEm commented Jan 5, 2025

github-actions bot commented Jan 27, 2025

dunhamjared commented Feb 5, 2025

Source

Example

dunhamjared commented Feb 5, 2025 • edited Loading

thetutlage commented Feb 6, 2025

mdthansil commented Oct 26, 2024 •

edited

Loading

mdthansil commented Oct 28, 2024 •

edited

Loading

dunhamjared commented Feb 5, 2025 •

edited

Loading