fix: passing files as value in change handler instead of just input v…

…alue when input has files type

(cherry picked from commit 40f64b7)

lib/create-form.js

@@ -8,7 +8,21 @@ function isCheckbox(element) {
   return element.getAttribute && element.getAttribute('type') === 'checkbox';
 }
 
-export const createForm = config => {
+function isFileInput(element) {
+  return element.getAttribute && element.getAttribute('type') === 'file';
+}
+
+function resolveValue(element) {
+  if (isFileInput(element)) {
+    return element.files;
+  } else if (isCheckbox(element)) {
+    return element.checked;
+  } else {
+    return element.value;
+  }
+}
+
+export const createForm = (config) => {
   let initialValues = config.initialValues || {};
 
   const validationSchema = config.validationSchema;
@@ -31,12 +45,14 @@ export const createForm = config => {
   const isSubmitting = writable(false);
   const isValidating = writable(false);
 
-  const isValid = derived(errors, $errors => {
-    const noErrors = util.getValues($errors).every(field => field === NO_ERROR);
+  const isValid = derived(errors, ($errors) => {
+    const noErrors = util
+      .getValues($errors)
+      .every((field) => field === NO_ERROR);
     return noErrors;
   });
 
-  const modified = derived(form, $form => {
+  const modified = derived(form, ($form) => {
     const object = util.assignDeep($form, false);
 
     for (let key in $form) {
@@ -46,14 +62,14 @@ export const createForm = config => {
     return object;
   });
 
-  const isModified = derived(modified, $modified => {
+  const isModified = derived(modified, ($modified) => {
     return util.getValues($modified).includes(true);
   });
 
   function validateField(field) {
     return util
       .subscribeOnce(form)
-      .then(values => validateFieldValue(field, values[field]));
+      .then((values) => validateFieldValue(field, values[field]));
   }
 
   function validateFieldValue(field, value) {
@@ -65,7 +81,7 @@ export const createForm = config => {
       return validationSchema
         .validateAt(field, get(form))
         .then(() => util.update(errors, field, ''))
-        .catch(error => util.update(errors, field, error.message))
+        .catch((error) => util.update(errors, field, error.message))
         .finally(() => {
           isValidating.set(false);
         });
@@ -75,7 +91,7 @@ export const createForm = config => {
       isValidating.set(true);
       return Promise.resolve()
         .then(() => validateFunction({[field]: value}))
-        .then(errs =>
+        .then((errs) =>
           util.update(errors, field, !util.isNullish(errs) ? errs[field] : ''),
         )
         .finally(() => {
@@ -94,7 +110,7 @@ export const createForm = config => {
   function handleChange(event) {
     const element = event.target;
     const field = element.name || element.id;
-    const value = isCheckbox(element) ? element.checked : element.value;
+    const value = resolveValue(element);
 
     return updateValidateField(field, value);
   }
@@ -106,13 +122,13 @@ export const createForm = config => {
 
     isSubmitting.set(true);
 
-    return util.subscribeOnce(form).then(values => {
+    return util.subscribeOnce(form).then((values) => {
       if (typeof validateFunction === 'function') {
         isValidating.set(true);
 
         return Promise.resolve()
           .then(() => validateFunction(values))
-          .then(error => {
+          .then((error) => {
             if (util.isNullish(error) || util.getValues(error).length === 0) {
               clearErrorsAndSubmit(values);
             } else {
@@ -131,11 +147,11 @@ export const createForm = config => {
             .validate(values, {abortEarly: false})
             .then(() => clearErrorsAndSubmit(values))
             // eslint-disable-next-line unicorn/catch-error-name
-            .catch(yupErrors => {
+            .catch((yupErrors) => {
               if (yupErrors && yupErrors.inner) {
                 const updatedErrors = getInitial.errors();
 
-                yupErrors.inner.map(error =>
+                yupErrors.inner.map((error) =>
                   util.set(updatedErrors, error.path, error.message),
                 );