@firecms/core 3.1.0 → 3.2.0-canary.44dc65b

package/src/form/PropertyFieldBinding.tsx

@@ -17,7 +17,7 @@ import {
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../util";
-import { useAuthController, useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController, useTranslation } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
 import { ErrorBoundary } from "../components";
@@ -213,6 +213,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
             formexFieldProps: FormexFieldProps<T, any>
         }) {
 
+    const { t } = useTranslation();
     const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
@@ -291,7 +292,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>
-                    This value has been updated elsewhere
+                    {t("value_updated_elsewhere")}
                 </Typography>}
 
         </ErrorBoundary>);

package/src/form/components/LocalChangesMenu.tsx

@@ -16,7 +16,7 @@ import {
     WarningIcon
 } from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
-import { useSnackbarController } from "../../hooks";
+import { useSnackbarController, useTranslation } from "../../hooks";
 import { mergeDeep } from "../../util";
 import { flattenKeys, removeEntityFromCache } from "../../util/entity_cache";
 import { ResolvedProperties } from "../../types";
@@ -39,6 +39,7 @@ export function LocalChangesMenu<M extends object>({
                                                    }: LocalChangesMenuProps<M>) {
 
     const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
     const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
     const [open, setOpen] = useState(false);
 
@@ -62,7 +63,7 @@ export function LocalChangesMenu<M extends object>({
         formex.setValues(mergedValues);
         snackbarController.open({
             type: "info",
-            message: "Local changes applied to the form"
+            message: t("local_changes_applied")
         });
         handleCloseMenu();
         onClearLocalChanges?.();
@@ -72,7 +73,7 @@ export function LocalChangesMenu<M extends object>({
         removeEntityFromCache(cacheKey);
         snackbarController.open({
             type: "info",
-            message: "Local changes discarded"
+            message: t("local_changes_discarded")
         });
         handleCloseMenu();
         onClearLocalChanges?.();
@@ -90,7 +91,7 @@ export function LocalChangesMenu<M extends object>({
                         onClick={handleOpenMenu}
                     >
                         <WarningIcon size={"smallest"} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
-                        Unsaved Local changes
+                        {t("unsaved_local_changes")}
                         <KeyboardArrowDownIcon size={"smallest"}/>
                     </Button>
                 }
@@ -98,12 +99,11 @@ export function LocalChangesMenu<M extends object>({
                 onOpenChange={setOpen}
             >
                 <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
-                    This document was edited locally and has unsaved changes. These local changes will be lost if you
-                    don't apply them.
+                    {t("unsaved_local_changes_description")}
                 </div>
-                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>Preview Changes</MenuItem>
-                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>Apply Changes</MenuItem>
-                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>Discard Local Changes</MenuItem>
+                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>{t("preview_changes")}</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>{t("apply_changes")}</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>{t("discard_local_changes")}</MenuItem>
             </Menu>
 
             <Dialog
@@ -111,10 +111,10 @@ export function LocalChangesMenu<M extends object>({
                 onOpenChange={setPreviewDialogOpen}
                 maxWidth={"4xl"}
             >
-                <DialogTitle variant={"h6"}>Preview Local Changes</DialogTitle>
+                <DialogTitle variant={"h6"}>{t("preview_local_changes")}</DialogTitle>
                 <DialogContent className={"my-4"}>
                     <Typography variant={"body2"} className={"mb-4"}>
-                        These are the local changes that will be applied to the form.
+                        {t("preview_local_changes_description")}
                     </Typography>
                     <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
                         maxHeight: 520,
@@ -127,7 +127,7 @@ export function LocalChangesMenu<M extends object>({
                     </div>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={() => setPreviewDialogOpen(false)}>Close</Button>
+                    <Button onClick={() => setPreviewDialogOpen(false)}>{t("close")}</Button>
                     <Button
                         variant={"filled"}
                         onClick={() => {
@@ -135,7 +135,7 @@ export function LocalChangesMenu<M extends object>({
                             setPreviewDialogOpen(false);
                         }}
                     >
-                        Apply changes
+                        {t("apply_changes")}
                     </Button>
                 </DialogActions>
             </Dialog>

package/src/form/components/StorageItemPreview.tsx

@@ -5,6 +5,7 @@ import { PreviewSize, PropertyPreview } from "../../preview";
 
 import { cls, DescriptionIcon, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
+import { useTranslation } from "../../hooks/useTranslation";
 
 interface StorageItemPreviewProps {
     name: string;
@@ -27,7 +28,7 @@ export function StorageItemPreview({
                                        placeholder,
                                        className
                                    }: StorageItemPreviewProps) {
-
+    const { t } = useTranslation();
     return (
         <div className={cls(
             "relative border-box flex items-center justify-center",
@@ -41,7 +42,7 @@ export function StorageItemPreview({
 
                     <Tooltip
                         asChild={true}
-                        title="Remove">
+                        title={t("remove")}>
                         <IconButton
                             size={"small"}
                             onClick={(event) => {

package/src/form/components/StorageUploadProgress.tsx

@@ -32,6 +32,7 @@ export function StorageUploadProgress({
 
     const [error, setError] = React.useState<Error | undefined>();
     const [loading, setLoading] = React.useState<boolean>(false);
+    const [progress, setProgress] = React.useState<number>(0);
     const mounted = React.useRef(false);
     const uploading = React.useRef(false);
 
@@ -46,7 +47,10 @@ export function StorageUploadProgress({
             file,
             fileName,
             path: storagePath,
-            metadata
+            metadata,
+            onProgress: (p) => {
+                if (mounted.current) setProgress(p);
+            }
         })
             .then(async ({ path, storageUrl }) => {
                 console.debug("Upload successful", path);
@@ -79,22 +83,33 @@ export function StorageUploadProgress({
         };
     }, [entry.file, entry.fileName, upload]);
 
+    const isLargeFile = entry.file && entry.file.size > 500 * 1024;
+    const renderProgressBar = loading && isLargeFile && progress > 0;
+    const progressBar = renderProgressBar && (
+        <div className="absolute bottom-0 left-0 h-1 bg-primary w-full origin-left transition-transform duration-200"
+             style={{ transform: `scaleX(${progress / 100})` }} />
+    );
+
     if (simple) {
-        return <div className={`w-${imageSize} h-${imageSize}`}>
+        return <div className={`relative overflow-hidden w-${imageSize} h-${imageSize}`}>
 
             {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
 
+            {progressBar}
+
         </div>
     }
     return (
 
         <div className={cls(paperMixin,
-            "p-4 relative border-box flex items-center justify-center",
+            "p-4 relative overflow-hidden border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
                 <Skeleton className="w-full h-full"/>}
 
+            {progressBar}
+
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -4,8 +4,7 @@ import { ReferencePreview } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
-
-import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { useNavigationController, useReferenceDialog, useTranslation } from "../../hooks";
 import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
@@ -48,6 +47,7 @@ export function ArrayOfReferencesFieldBinding({
         setValue
     });
 
+    const { t } = useTranslation();
     const navigationController = useNavigationController();
     const collection: EntityCollection | undefined = useMemo(() => {
         return ofProperty.path ? navigationController.getCollection(ofProperty.path) : undefined;
@@ -84,7 +84,7 @@ export function ArrayOfReferencesFieldBinding({
                                     }: ArrayEntryParams) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
         if (!entryValue)
-            return <div>Internal ERROR</div>;
+            return <div>{t("internal_error")}</div>;
         return (
             <ReferencePreview
                 key={internalId}
@@ -132,7 +132,7 @@ export function ArrayOfReferencesFieldBinding({
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
                 <EditIcon size={"small"}/>
-                Edit {property.name}
+                {t("edit_name", { name: property.name ?? "" })}
             </Button>
         </div>}
     </>;

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -11,6 +11,7 @@ import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { ArrayContainer, ArrayEntryParams } from "../../components";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -37,6 +38,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                         }: FieldProps<T>) {
 
     const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
 
     if (!property.oneOf)
         throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
@@ -84,7 +86,7 @@ export function BlockFieldBinding<T extends Array<any>>({
     const body = <ArrayContainer value={value}
                                  className={"flex flex-col gap-3"}
                                  droppableId={propertyKey}
-                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                 addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                  buildEntry={buildEntry}
                                  onInternalIdAdded={setLastAddedId}
                                  disabled={isSubmitting || Boolean(property.disabled)}
@@ -167,6 +169,7 @@ function BlockEntry({
     const [typeInternal, setTypeInternal] = useState<string | undefined>(type ?? undefined);
 
     const formex = useFormex();
+    const { t } = useTranslation();
 
     useEffect(() => {
         if (!type) {
@@ -227,7 +230,7 @@ function BlockEntry({
                             <Select
                                 className="mb-2"
                                 placeholder={<Typography variant={"caption"}
-                                                         className={"px-4 py-2 font-medium"}>Type</Typography>}
+                                                         className={"px-4 py-2 font-medium"}>{t("type")}</Typography>}
                                 size={"medium"}
                                 fullWidth={true}
                                 position={"item-aligned"}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -22,6 +22,7 @@ import {
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
 import { getIn } from "@firecms/formex";
+import { useTranslation } from "../../hooks/useTranslation";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -54,6 +55,7 @@ export function KeyValueFieldBinding({
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
 
+    const { t } = useTranslation();
     const initialValues = getIn(context.formex.initialValues, propertyKey);
 
     const mapFormView = <MapEditView value={value}
@@ -103,6 +105,7 @@ function MapEditView<T extends Record<string, any>>({
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
+    const { t } = useTranslation();
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
         Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
@@ -230,7 +233,7 @@ function MapEditView<T extends Record<string, any>>({
                     }]]);
                 }
                 }>
-            {fieldName ? `Add to ${fieldName}` : "Add"}
+            {fieldName ? t("add_to_field", { fieldName }) : t("add_entry")}
         </Button>
 
     </div>;
@@ -261,12 +264,13 @@ function MapKeyValueRow<T extends Record<string, any>>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
 
     function buildInput(entryValue: any, fieldKey: string, dataType: DataType) {
         if (dataType === "string" || dataType === "number") {
             return <TextField
                 key={dataType}
-                placeholder={"value"}
+                placeholder={t("value")}
                 value={entryValue}
                 type={dataType === "number" ? "number" : "text"}
                 size={"medium"}
@@ -325,7 +329,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <ArrayContainer value={entryValue}
                                 newDefaultEntry={""}
                                 droppableId={rowId.toString()}
-                                addLabel={fieldKey ? `Add to ${fieldKey}` : "Add"}
+                                addLabel={fieldKey ? t("add_to_field", { fieldName: fieldKey }) : t("add_entry")}
                                 size={"small"}
                                 disabled={disabled || !fieldKey}
                                 canAddElements={true}
@@ -370,7 +374,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -386,7 +390,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
-                        placeholder={"key"}
+                        placeholder={t("key")}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
                         size={"medium"}
                         onChange={(event) => {
@@ -404,17 +408,17 @@ function MapKeyValueRow<T extends Record<string, any>>({
                         </IconButton>}
                     >
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                                  onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                                  onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                                  onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                                  onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                                  onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                                  onClick={() => doUpdateDataType("array")}>{t("array")}</MenuItem>
                     </Menu>
 
                     <IconButton aria-label="delete"
@@ -446,6 +450,7 @@ function ArrayKeyValueRow<T>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
     const [selectedDataType, setSelectedDataType] = useState<DataType>(getDataType(value) ?? "string");
 
     function doUpdateDataType(dataType: DataType) {
@@ -487,7 +492,7 @@ function ArrayKeyValueRow<T>({
                                            }}/>;
         } else if (dataType === "array") {
             return <Typography variant={"caption"}>
-                Arrays of arrays are not supported.
+                {t("arrays_of_arrays_not_supported")}
             </Typography>;
         } else if (dataType === "map") {
             return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
@@ -499,7 +504,7 @@ function ArrayKeyValueRow<T>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -519,15 +524,15 @@ function ArrayKeyValueRow<T>({
                         <ArrowDropDownIcon/>
                     </IconButton>}>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                              onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                              onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                              onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                              onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                              onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                 </Menu>
 
             </Typography>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -7,6 +7,7 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { FormEntry } from "../components/FormEntry";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
 
 /**
  * Field that renders the children property fields
@@ -91,7 +92,7 @@ export function MapFieldBinding({
             }
         </div>
 
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value, t)}*/}
 
     </>
         ;
@@ -128,7 +129,7 @@ export function MapFieldBinding({
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
+const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any, t: any) => {
 
     const keys = Object.keys(properties)
         .filter((key) => !value || !(key in value));
@@ -143,7 +144,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
     if (!keys.length) return <></>;
 
     return <div className={"m-4"}>
-        <InputLabel>Add property</InputLabel>
+        <InputLabel>{t("add_property")}</InputLabel>
         <Select
             value={""}
             size={"large"}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -12,8 +12,9 @@ import {
     useStorageSource
 } from "../../index";
 import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
-import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
+import { FireCMSEditor, FireCMSEditorProps } from "../../editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
+import { isImageFile, resizeImage } from "../../util/useStorageUploadController";
 
 interface MarkdownEditorFieldProps {
     highlight?: { from: number, to: number };
@@ -55,12 +56,12 @@ export function MarkdownEditorFieldBinding({
         }
         internalValue.current = content;
         setValue(content);
-    }, [setValue]);
+    }, [setValue, value]);
 
     useEffect(() => {
         if (internalValue.current !== value) {
             internalValue.current = value;
-            setFieldVersion(fieldVersion + 1);
+            setFieldVersion(v => v + 1);
         }
     }, [value]);
 
@@ -112,33 +113,46 @@ export function MarkdownEditorFieldBinding({
     // Extract markdown config from property - can be boolean or object
     const markdownConfig = typeof property.markdown === 'object' ? property.markdown : undefined;
 
+    const handleImageUpload = async (file: File) => {
+        const imageResize = storage?.imageResize;
+        const legacyCompression = storage?.imageCompression;
+        if ((imageResize || legacyCompression) && isImageFile(file)) {
+            file = await resizeImage(file, imageResize, legacyCompression);
+        }
+
+        const storagePath = storagePathBuilder(file);
+        const fileName = await fileNameBuilder(file);
+        const result = await storageSource.uploadFile({
+            file,
+            fileName,
+            path: storagePath,
+        });
+        const downloadConfig = await storageSource.getDownloadURL(result.path);
+        const url = downloadConfig.url;
+        if (!url) {
+            throw new Error("Error uploading image");
+        }
+        return url;
+    };
+
     const editor = <FireCMSEditor
+        key={context.formex.version + fieldVersion}
         content={value}
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
         highlight={highlight}
         disabled={disabled}
         markdownConfig={markdownConfig}
-        handleImageUpload={async (file: File) => {
-            const storagePath = storagePathBuilder(file);
-            const fileName = await fileNameBuilder(file);
-            const result = await storageSource.uploadFile({
-                file,
-                fileName,
-                path: storagePath,
-            });
-            const downloadConfig = await storageSource.getDownloadURL(result.path);
-            const url = downloadConfig.url;
-            if (!url) {
-                throw new Error("Error uploading image");
-            }
-            return url;
-        }}
+        handleImageUpload={handleImageUpload}
         {...editorProps}
     />;
 
     if (minimalistView)
-        return editor;
+        return (
+            <>
+                {editor}
+            </>
+        );
 
     return (
         <>

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -7,6 +7,7 @@ import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "../../hooks";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -34,6 +35,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
 
     const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
 
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
@@ -87,7 +89,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
     const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
     const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
-                                           addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                           addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                            value={value}
                                            buildEntry={buildEntry}
                                            onInternalIdAdded={setLastAddedId}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -41,6 +41,7 @@ import {
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useTranslation } from "../../hooks/useTranslation";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
 const disabledClasses = fieldBackgroundDisabledMixin;
@@ -135,7 +136,6 @@ export function StorageUploadFieldBinding({
                 error={error}
                 disabled={disabled}
                 property={property} />
-
         </>
     );
 }
@@ -387,6 +387,7 @@ export function StorageUpload({
     storage,
     storagePathBuilder,
 }: StorageUploadProps) {
+    const { t } = useTranslation();
 
     if (multipleFilesSupported) {
         const arrayProperty = property as ResolvedArrayProperty<string[]>;
@@ -461,8 +462,8 @@ export function StorageUpload({
     }, [value, multipleFilesSupported, onChange, setInternalValue]);
 
     const helpText = multipleFilesSupported
-        ? "Drag 'n' drop some files here, or click to select files. Drag to reorder."
-        : "Drag 'n' drop a file here, or click to select one";
+        ? t("drag_drop_multiple")
+        : t("drag_drop_single");
 
     const renderProperty: ResolvedStringProperty = multipleFilesSupported
         ? (property as ResolvedArrayProperty<string[]>).of as ResolvedStringProperty

package/src/hooks/index.tsx

@@ -31,3 +31,4 @@ export * from "./useBuildLocalConfigurationPersistence";
 export * from "./useBuildModeController";
 
 export * from "./useValidateAuthenticator";
+export * from "./useTranslation";