[0.1.x] File improvements (#4)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

Author: timacdonald

packages/alpine/src/index.ts

@@ -84,9 +84,11 @@ export default function (Alpine: TAlpine) {
         const createForm = (): Data&Form<Data> => ({
             ...cloneDeep(inputs),
             data() {
+                const newForm = cloneDeep(form)
+
                 return originalInputs.reduce((carry, name) => ({
                     ...carry,
-                    [name]: cloneDeep(form[name]),
+                    [name]: newForm[name],
                 }), {}) as Data
             },
             touched(name) {
@@ -113,6 +115,11 @@ export default function (Alpine: TAlpine) {
 
                 return form
             },
+            forgetError(name) {
+                validator.forgetError(name)
+
+                return form
+            },
             reset(...names) {
                 const original = cloneDeep(originalData)
 
@@ -136,6 +143,11 @@ export default function (Alpine: TAlpine) {
             async submit(config = {}) {
                 return client[method](url, form.data(), resolveSubmitConfig(config))
             },
+            validateFiles() {
+                validator.validateFiles()
+
+                return form
+            },
         })
 
         /**

packages/alpine/src/types.ts

@@ -1,4 +1,4 @@
-import { Config, NamedInputEvent, SimpleValidationErrors, ValidationErrors, Validator } from 'laravel-precognition'
+import { Config, NamedInputEvent, SimpleValidationErrors, ValidationErrors } from 'laravel-precognition'
 
 export interface Form<Data extends Record<string, unknown>> {
     processing: boolean,
@@ -11,7 +11,9 @@ export interface Form<Data extends Record<string, unknown>> {
     invalid(name: string): boolean,
     validate(name: string|NamedInputEvent): Data&Form<Data>,
     setErrors(errors: SimpleValidationErrors|ValidationErrors): Data&Form<Data>
+    forgetError(name: string|NamedInputEvent): Data&Form<Data>
     setValidationTimeout(duration: number): Data&Form<Data>,
     submit(config?: Config): Promise<unknown>,
     reset(...keys: string[]): Data&Form<Data>,
+    validateFiles(): Data&Form<Data>,
 }

packages/core/package.json

@@ -33,6 +33,7 @@
         "lodash.get": "^4.4.2",
         "lodash.isequal": "^4.0.8",
         "lodash.merge": "^4.6.2",
+        "lodash.omit": "^4.5.0",
         "lodash.set": "^4.3.2"
     },
     "devDependencies": {
@@ -44,6 +45,7 @@
         "@types/lodash.get": "^4.4.7",
         "@types/lodash.isequal": "^4.0.7",
         "@types/lodash.merge": "^4.0.7",
+        "@types/lodash.omit": "^4.5.7",
         "@types/lodash.set": "^4.3.7",
         "@types/node": "^20.1.0",
         "babel-jest": "^29.5.0",

packages/core/src/client.ts

@@ -107,6 +107,7 @@ const resolveConfig = (config: Config): Config => ({
         : config.fingerprint,
     headers: {
         ...config.headers,
+        'Content-Type': resolveContentType(config),
         ...config.precognitive !== false ? {
             Precognition: true,
         } : {},
@@ -178,3 +179,26 @@ const resolveStatusHandler = (config: Config, code: number): StatusHandler|undef
     422: config.onValidationError,
     423: config.onLocked,
 }[code])
+
+/**
+ * Resolve the request's "Content-Type" header.
+ */
+const resolveContentType = (config: Config): string => config.headers?.['Content-Type']
+    ?? config.headers?.['Content-type']
+    ?? config.headers?.['content-type']
+    ?? (hasFiles(config.data) ? 'multipart/form-data' : 'application/json')
+
+/**
+ * Determine if the payload has any files.
+ *
+ * @see https://github.com/inertiajs/inertia/blob/master/packages/core/src/files.ts
+ */
+const hasFiles = (data: unknown): boolean => isFile(data)
+    || (typeof data === 'object' && data !== null && Object.values(data).some((value) => hasFiles(value)))
+
+/**
+ * Determine if the value is a file.
+ */
+export const isFile = (value: unknown): boolean => (typeof File !== 'undefined' && value instanceof File)
+    || value instanceof Blob
+    || (typeof FileList !== 'undefined' && value instanceof FileList && value.length > 0)

packages/core/src/types.ts

@@ -53,9 +53,11 @@ export interface Validator {
     errors(): ValidationErrors,
     setErrors(errors: ValidationErrors|SimpleValidationErrors): Validator,
     hasErrors(): boolean,
+    forgetError(error: string|NamedInputEvent): Validator,
     reset(...names: string[]): Validator,
     setTimeout(duration: number): Validator,
     on(event: keyof ValidatorListeners, callback: () => void): Validator,
+    validateFiles(): Validator,
 }
 
 export interface ValidatorListeners {

packages/core/src/validator.ts

@@ -3,8 +3,10 @@ import isequal from 'lodash.isequal'
 import get from 'lodash.get'
 import set from 'lodash.set'
 import { ValidationCallback, Config, NamedInputEvent, SimpleValidationErrors, ValidationErrors, Validator as TValidator, ValidatorListeners, ValidationConfig } from './types'
-import { client } from './client'
+import { client, isFile } from './client'
 import { isAxiosError } from 'axios'
+import omit from 'lodash.omit'
+import merge from 'lodash.merge'
 
 export const createValidator = (callback: ValidationCallback, initialData: Record<string, unknown> = {}): TValidator => {
     /**
@@ -16,6 +18,11 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
         validatingChanged: [],
     }
 
+    /**
+     * Validate files state.
+     */
+    let validateFiles = false
+
     /**
      * Processing validation state.
      */
@@ -57,8 +64,14 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
 
             listeners.errorsChanged.forEach(callback => callback())
         }
+    }
 
-        setTouched([...touched, ...Object.keys(errors)])
+    const forgetError = (name: string|NamedInputEvent) => {
+        const newErrors = { ...errors }
+
+        delete newErrors[resolveName(name)]
+
+        setErrors(newErrors)
     }
 
     /**
@@ -96,11 +109,11 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
      */
     const createValidator = () => debounce(() => {
         callback({
-            get: (url, data = {}, config = {}) => client.get(url, data, resolveConfig(config, data)),
-            post: (url, data = {}, config = {}) => client.post(url, data, resolveConfig(config, data)),
-            patch: (url, data = {}, config = {}) => client.patch(url, data, resolveConfig(config, data)),
-            put: (url, data = {}, config = {}) => client.put(url, data, resolveConfig(config, data)),
-            delete: (url, data = {}, config = {}) => client.delete(url, data, resolveConfig(config, data)),
+            get: (url, data = {}, config = {}) => client.get(url, parseData(data), resolveConfig(config, data)),
+            post: (url, data = {}, config = {}) => client.post(url, parseData(data), resolveConfig(config, data)),
+            patch: (url, data = {}, config = {}) => client.patch(url, parseData(data), resolveConfig(config, data)),
+            put: (url, data = {}, config = {}) => client.put(url, parseData(data), resolveConfig(config, data)),
+            delete: (url, data = {}, config = {}) => client.delete(url, parseData(data), resolveConfig(config, data)),
         })
         .catch(error => isAxiosError(error) ? null : Promise.reject(error))
     }, debounceTimeoutDuration, { leading: true, trailing: true })
@@ -113,61 +126,69 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
     /**
      * Resolve the configuration.
      */
-    const resolveConfig = (config: ValidationConfig, data: Record<string, unknown> = {}): Config => ({
-        ...config,
-        timeout: config.timeout ?? 5000,
-        validate: config.validate
-            ? config.validate
-            : touched,
-        onValidationError: (response, axiosError) => {
-            setErrors(response.data.errors)
-
-            return config.onValidationError
-                ? config.onValidationError(response, axiosError)
-                : Promise.reject(axiosError)
-        },
-        onPrecognitionSuccess: (response) => {
-            setErrors({})
-
-            return config.onPrecognitionSuccess
-                ? config.onPrecognitionSuccess(response)
-                : response
-        },
-        onBefore: () => {
-            const beforeValidationResult = (config.onBeforeValidation ?? ((newRequest, oldRequest) => {
-                return ! isequal(newRequest, oldRequest)
-            }))({ data }, { data: oldData })
-
-            if (beforeValidationResult === false) {
-                return false
-            }
-
-            const beforeResult = (config.onBefore || (() => true))()
-
-            if (beforeResult === false) {
-                return false
-            }
-
-            oldData = data
-
-            return true
-        },
-        onStart: () => {
-            setValidating(true);
-
-            (config.onStart ?? (() => null))()
-        },
-        onFinish: () => {
-            setValidating(false);
-
-            (config.onFinish ?? (() => null))()
-        },
-    })
+    const resolveConfig = (config: ValidationConfig, data: Record<string, unknown> = {}): Config => {
+        const validate = Array.from(config.validate ?? touched)
+
+        return {
+            ...config,
+            validate,
+            timeout: config.timeout ?? 5000,
+            onValidationError: (response, axiosError) => {
+                setErrors(merge(omit({ ...errors }, validate), response.data.errors))
+
+                return config.onValidationError
+                    ? config.onValidationError(response, axiosError)
+                    : Promise.reject(axiosError)
+            },
+            onPrecognitionSuccess: (response) => {
+                setErrors(omit({ ...errors }, validate))
+
+                return config.onPrecognitionSuccess
+                    ? config.onPrecognitionSuccess(response)
+                    : response
+            },
+            onBefore: () => {
+                const beforeValidationResult = (config.onBeforeValidation ?? ((newRequest, oldRequest) => {
+                    return ! isequal(newRequest, oldRequest)
+                }))({ data }, { data: oldData })
+
+                if (beforeValidationResult === false) {
+                    return false
+                }
+
+                const beforeResult = (config.onBefore || (() => true))()
+
+                if (beforeResult === false) {
+                    return false
+                }
+
+                oldData = data
+
+                return true
+            },
+            onStart: () => {
+                setValidating(true);
+
+                (config.onStart ?? (() => null))()
+            },
+            onFinish: () => {
+                setValidating(false);
+
+                (config.onFinish ?? (() => null))()
+            },
+        }
+    }
 
     /**
      * Validate the given input.
      */
     const validate = (name: string|NamedInputEvent, value: unknown) => {
+        if (isFile(value) && !validateFiles) {
+            console.warn('Precognition file validation is not active. Call the "validateFiles" function on your form to enable it.')
+
+            return
+        }
+
         name = resolveName(name)
 
         if (get(oldData, name) !== value) {
@@ -181,6 +202,13 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
         validator()
     }
 
+    /**
+     * Parse the validated data.
+     */
+    const parseData = (data: Record<string, unknown>): Record<string, unknown> => validateFiles === false
+        ? forgetFiles(data)
+        : data
+
     /**
      * The form validator instance.
      */
@@ -200,6 +228,11 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
 
             return this
         },
+        forgetError(name) {
+            forgetError(name)
+
+            return this
+        },
         reset(...names) {
             if (names.length === 0) {
                 setTouched([])
@@ -227,11 +260,19 @@ export const createValidator = (callback: ValidationCallback, initialData: Recor
         on(event, callback) {
             listeners[event].push(callback)
 
+            return this
+        },
+        validateFiles() {
+            validateFiles = true
+
             return this
         },
     }
 }
 
+/**
+ * Normalise the validation errors as Inertia formatted errors.
+ */
 export const toSimpleValidationErrors = (errors: ValidationErrors|SimpleValidationErrors): SimpleValidationErrors => {
     return Object.keys(errors).reduce((carry, key) => ({
         ...carry,
@@ -241,16 +282,57 @@ export const toSimpleValidationErrors = (errors: ValidationErrors|SimpleValidati
     }), {})
 }
 
+/**
+ * Normalise the validation errors as Laravel formatted errors.
+ */
 export const toValidationErrors = (errors: ValidationErrors|SimpleValidationErrors): ValidationErrors => {
     return Object.keys(errors).reduce((carry, key) => ({
         ...carry,
         [key]: typeof errors[key] === 'string' ? [errors[key]] : errors[key],
     }), {})
 }
 
+/**
+ * Resolve the input's "name" attribute.
+ */
 export const resolveName = (name: string|NamedInputEvent): string => {
     return typeof name !== 'string'
         ? name.target.name
         : name
 }
 
+/**
+ * Forget any files from the payload.
+ */
+const forgetFiles = (data: Record<string, unknown>): Record<string, unknown> => {
+    const newData = { ...data }
+
+    Object.keys(newData).forEach(name => {
+        const value = newData[name]
+
+        if (value === null) {
+            return
+        }
+
+        if (isFile(value)) {
+            delete newData[name]
+
+            return
+        }
+
+        if (Array.isArray(value)) {
+            newData[name] = value.filter(isFile)
+
+            return
+        }
+
+        if (typeof value === 'object') {
+            // @ts-expect-error
+            newData[name] = forgetFiles(newData[name])
+
+            return
+        }
+    })
+
+    return newData
+}