Fix 3146 by implementing useFileWidgetProps hook (#4818)

* Fix 3146 by implementing useFileWidgetProps hook
Fixes #3146 by refactoring `FileWidget` in `core` to make the `useFileWidgetProps()` hook
Fixed #4803 by deleting the `FileWidget` in `daisyui`, moving the key "type-file" elements into `BaseInputTemplate`
- In `@rjsf/core` refactored the file extraction and callbacks into the new `useFileWidgetProps()` hook in `@rjsf/utils`
- In `@rjsf/daisyui` refactored the key `type=file` elements from `FileWidget` into `BaseInputTemplate`, deleting the `FileWidget` entirely in favor of the `core` one
- In `@rjsf/mantine` updated the `FileWidget` to use the `useFileWidgetProps()` hook
- In `@rjsf/utils` exported the `useFileWidgetProps()` hook and its associates types
  - Also added 100% unit tests for the new hook
- Updated the `utility-functions.md` and `v6.x upgrade guide.md` to document the new hook
- Updated the `CHANGELOG.md` accordingly

# Conflicts:
#	CHANGELOG.md

* - Responded to reviewer feedback

* - Updated docs

Author: heath-freenome

CHANGELOG.md

@@ -23,18 +23,28 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `Form` to support the new feature to do `onBlur` handling of `liveValidate` and `liveOmit`
 - Updated `FormProps` to add the new `initialFormData` prop
 - Updated `Form` so that is behaves as a "controlled" form when `formData` is passed and uncontrolled when `initialFormData` is passed, fixing [#391](https://github.com/rjsf-team/react-jsonschema-form/issues/391)
-  - Also fixed an issue where live validation was called on the initial form render, causing errors to show immediately, partially fixing [#512](https://github.com/rjsf-team/react-jsonschema-form/issues/512)
+    - Also fixed an issue where live validation was called on the initial form render, causing errors to show immediately, partially fixing [#512](https://github.com/rjsf-team/react-jsonschema-form/issues/512)
 - Updated `Form` to add a new programmatic function, `setFieldValue(fieldPath: string | FieldPathList, newValue?: T): void`, fixing [#2099](https://github.com/rjsf-team/react-jsonschema-form/issues/2099)
 - Added new `FallbackField` to add opt-in functionality to control form data that is of an unsupported or unknown type ([#4736](https://github.com/rjsf-team/react-jsonschema-form/issues/4736)).
+- Refactored much of the `FileWidget` implementation into a new `useFileWidgetProps()` hook, fixing [#3146](https://github.com/rjsf-team/react-jsonschema-form/issues/3146)
+
+## @rjsf/daisyui
+
+- Deleted the `FileWidget` component, moving the className and isMulti logic directly into the `BaseInputTemplate` so that the `@rjsf/core`'s `FileWidget` works properly for the theme, fixing [#4803](https://github.com/rjsf-team/react-jsonschema-form/issues/4803)
 
 ## @rjsf/mantine
 
 - Updated `FieldHelpTemplate` to avoid issue when `help` `and `fieldPathId` are undefined
+- Updated `FileWidget` to use the `useFileWidgetProps()` hook
+
+## @rjsf/utils
+
+- Added the `useFileWidgetProps()` hook implementation, refactored from `@rjsf/core`
 
 ## Dev / docs / playground
 
 - Updated the playground to switch `liveValidate` and `liveOmit` from checkboxes to radio buttons for the new options
-- Updated `internals.md`, `form-props.md` and `v6x upgrade guide.md` to document the new features, potential breaking changes and deprecations
+- Updated `internals.md`, `form-props.md`, `utility-functions.md` and `v6x upgrade guide.md` to document the new features, potential breaking changes and deprecations
 
 # 6.0.0-beta.22
 

packages/core/src/components/widgets/FileWidget.tsx

@@ -1,61 +1,18 @@
-import { ChangeEvent, useCallback, useMemo } from 'react';
+import { ChangeEvent } from 'react';
 import {
-  dataURItoBlob,
+  FileInfoType,
   FormContextType,
   getTemplate,
   Registry,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
   UIOptionsType,
+  useFileWidgetProps,
   WidgetProps,
 } from '@rjsf/utils';
 import Markdown from 'markdown-to-jsx';
 
-function addNameToDataURL(dataURL: string, name: string) {
-  if (dataURL === null) {
-    return null;
-  }
-  return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
-}
-
-type FileInfoType = {
-  dataURL?: string | null;
-  name: string;
-  size: number;
-  type: string;
-};
-
-function processFile(file: File): Promise<FileInfoType> {
-  const { name, size, type } = file;
-  return new Promise((resolve, reject) => {
-    const reader = new window.FileReader();
-    reader.onerror = reject;
-    reader.onload = (event) => {
-      if (typeof event.target?.result === 'string') {
-        resolve({
-          dataURL: addNameToDataURL(event.target.result, name),
-          name,
-          size,
-          type,
-        });
-      } else {
-        resolve({
-          dataURL: null,
-          name,
-          size,
-          type,
-        });
-      }
-    };
-    reader.readAsDataURL(file);
-  });
-}
-
-function processFiles(files: FileList) {
-  return Promise.all(Array.from(files).map(processFile));
-}
-
 function FileInfoPreview<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   fileInfo,
   registry,
@@ -125,29 +82,6 @@ function FilesInfo<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
   );
 }
 
-function extractFileInfo(dataURLs: string[]): FileInfoType[] {
-  return dataURLs.reduce((acc, dataURL) => {
-    if (!dataURL) {
-      return acc;
-    }
-    try {
-      const { blob, name } = dataURItoBlob(dataURL);
-      return [
-        ...acc,
-        {
-          dataURL,
-          name: name,
-          size: blob.size,
-          type: blob.type,
-        },
-      ];
-    } catch {
-      // Invalid dataURI, so just ignore it.
-      return acc;
-    }
-  }, [] as FileInfoType[]);
-}
-
 /**
  *  The `FileWidget` is a widget for rendering file upload fields.
  *  It is typically used with a string property with data-url format.
@@ -156,54 +90,29 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   props: WidgetProps<T, S, F>,
 ) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
+  const { filesInfo, handleChange, handleRemove } = useFileWidgetProps(value, onChange, multiple);
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
 
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      if (!event.target.files) {
-        return;
-      }
-      // Due to variances in themes, dealing with multiple files for the array case now happens one file at a time.
-      // This is because we don't pass `multiple` into the `BaseInputTemplate` anymore. Instead, we deal with the single
-      // file in each event and concatenate them together ourselves
-      processFiles(event.target.files).then((filesInfoEvent) => {
-        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
-        if (multiple) {
-          onChange(value.concat(newValue));
-        } else {
-          onChange(newValue[0]);
-        }
-      });
-    },
-    [multiple, value, onChange],
-  );
+  const handleOnChangeEvent = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      handleChange(event.target.files);
+    }
+  };
 
-  const filesInfo = useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
-  const rmFile = useCallback(
-    (index: number) => {
-      if (multiple) {
-        const newValue = value.filter((_: any, i: number) => i !== index);
-        onChange(newValue);
-      } else {
-        onChange(undefined);
-      }
-    },
-    [multiple, value, onChange],
-  );
   return (
     <div>
       <BaseInputTemplate
         {...props}
         disabled={disabled || readonly}
         type='file'
         required={value ? false : required} // this turns off HTML required validation when a value exists
-        onChangeOverride={handleChange}
+        onChangeOverride={handleOnChangeEvent}
         value=''
         accept={options.accept ? String(options.accept) : undefined}
       />
       <FilesInfo<T, S, F>
         filesInfo={filesInfo}
-        onRemove={rmFile}
+        onRemove={handleRemove}
         registry={registry}
         preview={options.filePreview}
         options={options}

packages/daisyui/src/templates/BaseInputTemplate/BaseInputTemplate.tsx

@@ -31,6 +31,7 @@ export default function BaseInputTemplate<
   const {
     id,
     htmlName,
+    multiple,
     value,
     required,
     disabled,
@@ -48,7 +49,12 @@ export default function BaseInputTemplate<
   } = props;
 
   const inputProps = getInputProps<T, S, F>(schema, type, options);
-
+  let className = 'input input-bordered';
+  let isMulti = multiple;
+  if (type === 'file') {
+    isMulti = schema.type === 'array' || Boolean(options.multiple);
+    className = 'file-input w-full';
+  }
   // Extract step, min, max, accept from inputProps
   const { step, min, max, accept, ...rest } = inputProps;
   const htmlInputProps = { step, min, max, accept, ...(schema.examples ? { list: examplesId(id) } : undefined) };
@@ -82,7 +88,8 @@ export default function BaseInputTemplate<
           required={required}
           disabled={disabled || readonly}
           autoFocus={autofocus}
-          className='input input-bordered'
+          className={className}
+          multiple={isMulti}
           {...rest}
           {...htmlInputProps}
           onChange={onChangeOverride || _onChange}

packages/daisyui/src/widgets/FileWidget/FileWidget.tsx

@@ -6,7 +6,6 @@ import CheckboxWidget from './CheckboxWidget/CheckboxWidget';
 import CheckboxesWidget from './CheckboxesWidget/CheckboxesWidget';
 import DateTimeWidget from './DateTimeWidget/DateTimeWidget';
 import DateWidget from './DateWidget/DateWidget';
-import FileWidget from './FileWidget/FileWidget';
 import RadioWidget from './RadioWidget/RadioWidget';
 import RangeWidget from './RangeWidget/RangeWidget';
 import RatingWidget from './RatingWidget/RatingWidget';
@@ -22,7 +21,6 @@ export {
   CheckboxWidget,
   DateTimeWidget,
   DateWidget,
-  FileWidget,
   RadioWidget,
   RangeWidget,
   RatingWidget,
@@ -44,7 +42,6 @@ export function generateWidgets<
     CheckboxWidget,
     DateTimeWidget,
     DateWidget,
-    FileWidget,
     RadioWidget,
     RangeWidget,
     RatingWidget,

packages/daisyui/src/widgets/FileWidget/index.ts

@@ -13852,16 +13852,40 @@ exports[`single fields string field format data-url 1`] = `
           className="label-text font-medium"
         />
       </label>
-      <input
-        className="file-input w-full"
-        disabled={false}
-        id="root"
-        multiple={false}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        type="file"
-      />
+      <div>
+        <div
+          className="form-control"
+        >
+          <label
+            className="label hidden"
+            htmlFor="root"
+            style={
+              {
+                "display": "none",
+              }
+            }
+          >
+            <span
+              className="label-text"
+            />
+          </label>
+          <input
+            aria-describedby="root__error root__description root__help"
+            autoFocus={false}
+            className="file-input w-full"
+            disabled={false}
+            id="root"
+            multiple={false}
+            name="root"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder=""
+            type="file"
+            value=""
+          />
+        </div>
+      </div>
       <div
         className="rjsf-field-error-template text-red-600"
       >