Introduce formDataArrayFormat option

Author: skryukov

packages/core/src/formData.ts

@@ -1,28 +1,47 @@
-import { FormDataConvertible } from './types'
+import { FormDataConvertible, SerializationArrayFormat } from './types'
 
 export function objectToFormData(
   source: Record<string, FormDataConvertible>,
-  form: FormData = new FormData(),
-  parentKey: string | null = null,
+  form: FormData,
+  parentKey: string | null,
+  formDataArrayFormat: SerializationArrayFormat,
 ): FormData {
   source = source || {}
 
   for (const key in source) {
     if (Object.prototype.hasOwnProperty.call(source, key)) {
-      append(form, composeKey(parentKey, key), source[key])
+      append(form, composeObjectKey(parentKey, key), source[key], formDataArrayFormat)
     }
   }
 
   return form
 }
 
-function composeKey(parent: string | null, key: string): string {
-  return parent ? parent + '[' + key + ']' : key
+function composeKey(parent: string | null, key: string, format: SerializationArrayFormat): string {
+  if (!parent) return key
+
+  switch (format) {
+    case 'indices':
+      return `${parent}[${key}]`
+    case 'brackets':
+      return `${parent}[]`
+  }
+}
+
+function composeObjectKey(parent: string | null, key: string): string {
+  return composeKey(parent, key, 'indices')
 }
 
-function append(form: FormData, key: string, value: FormDataConvertible): void {
+function append(
+  form: FormData,
+  key: string,
+  value: FormDataConvertible,
+  formDataArrayFormat: SerializationArrayFormat,
+): void {
   if (Array.isArray(value)) {
-    return Array.from(value.keys()).forEach((index) => append(form, composeKey(key, index.toString()), value[index]))
+    return Array.from(value.keys()).forEach((index) =>
+      append(form, composeKey(key, index.toString(), formDataArrayFormat), value[index], formDataArrayFormat),
+    )
   } else if (value instanceof Date) {
     return form.append(key, value.toISOString())
   } else if (value instanceof File) {
@@ -39,5 +58,5 @@ function append(form: FormData, key: string, value: FormDataConvertible): void {
     return form.append(key, '')
   }
 
-  objectToFormData(value, form, key)
+  objectToFormData(value, form, key, formDataArrayFormat)
 }

packages/core/src/router.ts

@@ -286,12 +286,13 @@ export class Router {
       onSuccess = () => {},
       onError = () => {},
       queryStringArrayFormat = 'brackets',
+      formDataArrayFormat = 'indices',
     }: VisitOptions = {},
   ): void {
     let url = typeof href === 'string' ? hrefToUrl(href) : href
 
     if ((hasFiles(data) || forceFormData) && !(data instanceof FormData)) {
-      data = objectToFormData(data)
+      data = objectToFormData(data, new FormData(), null, formDataArrayFormat)
     }
 
     if (!(data instanceof FormData)) {
@@ -313,6 +314,7 @@ export class Router {
       errorBag,
       forceFormData,
       queryStringArrayFormat,
+      formDataArrayFormat,
       cancelled: false,
       completed: false,
       interrupted: false,
@@ -340,6 +342,7 @@ export class Router {
       onSuccess,
       onError,
       queryStringArrayFormat,
+      formDataArrayFormat,
       cancelToken: new AbortController(),
     }
 

packages/core/src/types.ts

@@ -63,6 +63,8 @@ export type LocationVisit = {
   preserveScroll: boolean
 }
 
+export type SerializationArrayFormat = 'indices' | 'brackets'
+
 export type Visit = {
   method: Method
   data: RequestPayload
@@ -74,7 +76,8 @@ export type Visit = {
   headers: Record<string, string>
   errorBag: string | null
   forceFormData: boolean
-  queryStringArrayFormat: 'indices' | 'brackets'
+  queryStringArrayFormat: SerializationArrayFormat
+  formDataArrayFormat: SerializationArrayFormat
 }
 
 export type GlobalEventsMap = {

packages/core/src/url.ts

@@ -1,6 +1,6 @@
 import deepmerge from 'deepmerge'
 import * as qs from 'qs'
-import { FormDataConvertible, Method } from './types'
+import { FormDataConvertible, Method, SerializationArrayFormat } from './types'
 
 export function hrefToUrl(href: string | URL): URL {
   return new URL(href.toString(), window.location.toString())
@@ -10,7 +10,7 @@ export function mergeDataIntoQueryString(
   method: Method,
   href: URL | string,
   data: Record<string, FormDataConvertible>,
-  qsArrayFormat: 'indices' | 'brackets' = 'brackets',
+  qsArrayFormat: SerializationArrayFormat = 'brackets',
 ): [string, Record<string, FormDataConvertible>] {
   const hasHost = /^https?:\/\//.test(href.toString())
   const hasAbsolutePath = hasHost || href.toString().startsWith('/')

packages/react/src/Link.ts

@@ -5,6 +5,7 @@ import {
   PreserveStateOption,
   Progress,
   router,
+  SerializationArrayFormat,
   shouldIntercept,
 } from '@inertiajs/core'
 import { createElement, forwardRef, useCallback } from 'react'
@@ -31,7 +32,8 @@ interface BaseInertiaLinkProps {
   onCancel?: () => void
   onSuccess?: () => void
   onError?: () => void
-  queryStringArrayFormat?: 'indices' | 'brackets'
+  queryStringArrayFormat?: SerializationArrayFormat
+  formDataArrayFormat?: SerializationArrayFormat
 }
 
 export type InertiaLinkProps = BaseInertiaLinkProps &
@@ -53,6 +55,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
       except = [],
       headers = {},
       queryStringArrayFormat = 'brackets',
+      formDataArrayFormat = 'indices',
       onClick = noop,
       onCancelToken = noop,
       onBefore = noop,
@@ -82,6 +85,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
             only,
             except,
             headers,
+            formDataArrayFormat,
             onCancelToken,
             onBefore,
             onStart,

packages/svelte/src/components/Link.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FormDataConvertible, Method, PreserveStateOption } from '@inertiajs/core'
+  import type { FormDataConvertible, Method, PreserveStateOption, SerializationArrayFormat } from '@inertiajs/core'
   import { inertia } from '../index'
 
   export let href: string
@@ -12,7 +12,8 @@
   export let only: string[] = []
   export let except: string[] = []
   export let headers: Record<string, string> = {}
-  export let queryStringArrayFormat: 'brackets' | 'indices' = 'brackets'
+  export let queryStringArrayFormat: SerializationArrayFormat = 'brackets'
+  export let formDataArrayFormat: SerializationArrayFormat = 'indices'
 
   $: asProp = method !== 'get' ? 'button' : as.toLowerCase()
   $: elProps =
@@ -36,6 +37,7 @@
     except,
     headers,
     queryStringArrayFormat,
+    formDataArrayFormat,
   }}
   {...$$restProps}
   {...elProps}

packages/vue2/src/link.ts

@@ -5,6 +5,7 @@ import {
   PreserveStateOption,
   Progress,
   router,
+  SerializationArrayFormat,
   shouldIntercept,
 } from '@inertiajs/core'
 import { FunctionalComponentOptions, PropType } from 'vue'
@@ -28,7 +29,8 @@ export interface InertiaLinkProps {
   onFinish?: () => void
   onCancel?: () => void
   onSuccess?: () => void
-  queryStringArrayFormat?: 'brackets' | 'indices'
+  queryStringArrayFormat?: SerializationArrayFormat
+  formDataArrayFormat?: SerializationArrayFormat
 }
 
 type InertiaLink = FunctionalComponentOptions<InertiaLinkProps>
@@ -76,9 +78,13 @@ const Link: InertiaLink = {
       default: () => ({}),
     },
     queryStringArrayFormat: {
-      type: String as PropType<'brackets' | 'indices'>,
+      type: String as PropType<SerializationArrayFormat>,
       default: 'brackets',
     },
+    formDataArrayFormat: {
+      type: String as PropType<SerializationArrayFormat>,
+      default: 'indices',
+    },
   },
   render(h, { props, data, children }) {
     data.on = {
@@ -134,6 +140,7 @@ const Link: InertiaLink = {
                 only: props.only,
                 except: props.except,
                 headers: props.headers,
+                formDataArrayFormat: props.formDataArrayFormat,
                 // @ts-expect-error
                 onCancelToken: data.on.cancelToken,
                 // @ts-expect-error

packages/vue3/src/link.ts

@@ -1,4 +1,12 @@
-import { mergeDataIntoQueryString, Method, PageProps, Progress, router, shouldIntercept } from '@inertiajs/core'
+import {
+  mergeDataIntoQueryString,
+  Method,
+  PageProps,
+  Progress,
+  router,
+  SerializationArrayFormat,
+  shouldIntercept,
+} from '@inertiajs/core'
 import { defineComponent, DefineComponent, h, PropType } from 'vue'
 
 export interface InertiaLinkProps {
@@ -20,7 +28,8 @@ export interface InertiaLinkProps {
   onFinish?: () => void
   onCancel?: () => void
   onSuccess?: () => void
-  queryStringArrayFormat?: 'brackets' | 'indices'
+  queryStringArrayFormat?: SerializationArrayFormat
+  formDataArrayFormat?: SerializationArrayFormat
 }
 
 type InertiaLink = DefineComponent<InertiaLinkProps>
@@ -69,9 +78,13 @@ const Link: InertiaLink = defineComponent({
       default: () => ({}),
     },
     queryStringArrayFormat: {
-      type: String as PropType<'brackets' | 'indices'>,
+      type: String as PropType<SerializationArrayFormat>,
       default: 'brackets',
     },
+    formDataArrayFormat: {
+      type: String as PropType<SerializationArrayFormat>,
+      default: 'indices',
+    },
   },
   setup(props, { slots, attrs }) {
     return () => {
@@ -103,6 +116,7 @@ const Link: InertiaLink = defineComponent({
                 only: props.only,
                 except: props.except,
                 headers: props.headers,
+                formDataArrayFormat: props.formDataArrayFormat,
                 // @ts-expect-error
                 onCancelToken: attrs.onCancelToken || (() => ({})),
                 // @ts-expect-error