@balena/ui-shared-components 14.1.0-build-secure-boot-backup-d2d812bb2ed113d3a916cd9b05a3177eaa736d7d-1 → 14.1.0-build-secure-boot-backup-e7a2ae3ae27da0dd2adfb143b8f73aced69adf58-1

package/dist/components/Form/Widgets/FileWidget.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDropzone } from 'react-dropzone';
 import { Typography, InputLabel, Stack, Link, LinearProgress, Box, useMediaQuery, useTheme, } from '@mui/material';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { IconButtonWithTracking, Tooltip } from '../../..';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleExclamation, faFile, faFileImage, faTrash, faUpload, } from '@fortawesome/free-solid-svg-icons';
@@ -64,6 +64,7 @@ const getErrorMessage = (code, message, maxSize) => {
 };
 export const FileWidget = ({ onChange, multiple, schema, uiSchema, }) => {
     const [files, setFiles] = useState([]);
+    const [filesWithDataUrl, setFilesWithDataUrl] = useState([]);
     const [errorFiles, setErrorFiles] = useState([]);
     const theme = useTheme();
     const mobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -102,16 +103,13 @@ export const FileWidget = ({ onChange, multiple, schema, uiSchema, }) => {
                 const base64Data = reader.result.split(',')[1];
                 file.base64Data = base64Data;
                 const dataUrl = `data:${file.type};name=${file.name};base64,${base64Data}`;
-                if (multiple) {
-                    // NOTE: JSONSchema array data-url does not expect objects but only strings[]
-                    // see: https://github.com/rjsf-team/react-jsonschema-form/blob/297dac059fdf64fd1453bebb8366f0602c722f90/packages/utils/src/schema/isFilesArray.ts#L24
-                    onChange([...files, ...acceptedFiles].map((f) => `data:${f.type};name=${f.name};base64,${base64Data}`));
-                    return;
-                }
-                onChange({
-                    dataUrl,
-                    uploadedFile: file,
-                });
+                setFilesWithDataUrl((prev) => [
+                    ...prev,
+                    {
+                        dataUrl,
+                        uploadedFile: file,
+                    },
+                ]);
             };
             reader.readAsDataURL(file);
         });
@@ -122,7 +120,21 @@ export const FileWidget = ({ onChange, multiple, schema, uiSchema, }) => {
             setFiles(acceptedFiles.length ? [acceptedFiles[0]] : []);
         }
         setErrorFiles(rejectedFiles);
-    }, [onChange, setFiles, files, multiple]);
+    }, [setFiles, files, multiple]);
+    useEffect(() => {
+        if (filesWithDataUrl.length && filesWithDataUrl.length === files.length) {
+            // NOTE: JSONSchema array data-url does not expect objects but only strings[]
+            // see: https://github.com/rjsf-team/react-jsonschema-form/blob/297dac059fdf64fd1453bebb8366f0602c722f90/packages/utils/src/schema/isFilesArray.ts#L24
+            // Check if possibile to always pass only strings (dataUrls) and not objects when not multiple.
+            if (multiple) {
+                onChange(filesWithDataUrl.map((fileWithDataUrl) => fileWithDataUrl.dataUrl));
+                return;
+            }
+            // If not multiple, the schema accept an object and we can pass it directly
+            // if not necessary, in a major release we can change it to pass only the dataUrl string and unify the behaviour
+            onChange(filesWithDataUrl[0]);
+        }
+    }, [files, filesWithDataUrl, multiple, onChange]);
     const removeFile = useCallback((index) => {
         const newFiles = [...files];
         newFiles.splice(index, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "14.1.0-build-secure-boot-backup-d2d812bb2ed113d3a916cd9b05a3177eaa736d7d-1",
+  "version": "14.1.0-build-secure-boot-backup-e7a2ae3ae27da0dd2adfb143b8f73aced69adf58-1",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -133,7 +133,7 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2025-10-03T14:14:16.545Z"
+    "publishedAt": "2025-10-06T15:03:01.816Z"
   },
   "overrides": {
     "storybook": "$storybook"