@firecms/core 3.0.0-canary.15 → 3.0.0-canary.151

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
-import { Entity, FieldProps } from "../../types";
+import { FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
-import { cn, paperMixin } from "@firecms/ui";
+import { cls, paperMixin } from "@firecms/ui";
 
 /**
  *
@@ -21,7 +21,7 @@ export function ReadOnlyFieldBinding({
                                          value,
                                          error,
                                          showError,
-                                         tableMode,
+                                         minimalistView,
                                          property,
                                          includeDescription,
                                          context
@@ -30,30 +30,25 @@ export function ReadOnlyFieldBinding({
     if (!context.entityId)
         throw new Error("ReadOnlyFieldBinding: Entity id is null");
 
-    const entity: Entity<any> = {
-        id: context.entityId!,
-        values: context.values,
-        path: context.path
-    };
-
     return (
 
         <>
 
-            {!tableMode && <LabelWithIcon icon={getIconForProperty(property, "small")}
-                                          required={property.validation?.required}
-                                          title={property.name}
-                                          className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             }
 
             <div
-                className={cn(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                className={cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}
                                      value={value}
                                      property={property}
-                        // entity={entity}
                                      size={"medium"}/>
                 </ErrorBoundary>
 

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -3,12 +3,13 @@ import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
 import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorView } from "../../components";
-import { ReferencePreview } from "../../preview";
-import { getIconForProperty, getReferenceFrom } from "../../util";
-import { Button } from "@firecms/ui";
+import { EmptyValue, ReferencePreview } from "../../preview";
+import { getIconForProperty, getReferenceFrom, IconForView } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog.
@@ -17,7 +18,7 @@ import { useClearRestoreValue } from "../useClearRestoreValue";
  * and tables to the specified properties.
  * @group Form fields
  */
-export function ReferenceFieldBinding<M extends Record<string, any>>(props: FieldProps<EntityReference>) {
+export function ReferenceFieldBinding(props: FieldProps) {
 
     if (typeof props.property.path !== "string") {
         return <ReadOnlyFieldBinding {...props}/>
@@ -27,19 +28,21 @@ export function ReferenceFieldBinding<M extends Record<string, any>>(props: Fiel
 
 }
 
-function ReferenceFieldBindingInternal<M extends Record<string, any>>({
-                                                                          value,
-                                                                          setValue,
-                                                                          error,
-                                                                          showError,
-                                                                          isSubmitting,
-                                                                          disabled,
-                                                                          touched,
-                                                                          autoFocus,
-                                                                          property,
-                                                                          includeDescription,
-                                                                          context
-                                                                      }: FieldProps<EntityReference>) {
+function ReferenceFieldBindingInternal({
+                                           propertyKey,
+                                           value,
+                                           setValue,
+                                           error,
+                                           showError,
+                                           isSubmitting,
+                                           disabled,
+                                           minimalistView,
+                                           touched,
+                                           autoFocus,
+                                           property,
+                                           includeDescription,
+                                           size = "medium"
+                                       }: FieldProps<EntityReference>) {
     if (!property.path) {
         throw new Error("Property path is required for ReferenceFieldBinding");
     }
@@ -75,17 +78,19 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
         }
     );
 
-    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+    const onEntryClick = (e: React.SyntheticEvent) => {
         e.preventDefault();
         referenceDialogController.open();
-    }, [referenceDialogController]);
+    };
 
     return (
         <>
-            <LabelWithIcon icon={getIconForProperty(property, "small")}
-                           required={property.validation?.required}
-                           title={property.name}
-                           className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}
@@ -96,18 +101,24 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
                     hover={!disabled}
-                    size={"medium"}
+                    size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={value}
+                    includeEntityLink={property.includeEntityLink}
+                    includeId={property.includeId}
                 />}
 
                 {!value && <div className="justify-center text-left">
-                    <Button variant="outlined"
-                            color="primary"
-                            disabled={disabled || isSubmitting}
-                            onClick={onEntryClick}>
-                        Edit {property.name}
-                    </Button>
+                    <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                        disabled || isSubmitting
+                            ? "text-surface-accent-500"
+                            : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                                            onClick={onEntryClick}
+                                            size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                                     className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
                 </div>}
             </>}
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
-import { ErrorBoundary } from "../../components";
-import { getIconForProperty } from "../../util";
+import { CMSType, FieldProps, PropertyFieldBindingProps, ResolvedProperty } from "../../types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorBoundary } from "../../components";
+import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty, mergeDeep } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel } from "@firecms/ui";
+import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -23,7 +23,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              isSubmitting,
                                                              setValue,
                                                              setFieldValue,
-                                                             tableMode,
+                                                             minimalistView,
                                                              property,
                                                              includeDescription,
                                                              underlyingValueHasChanged,
@@ -34,8 +34,15 @@ export function RepeatFieldBinding<T extends Array<any>>({
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
 
-    if (!property.resolvedProperties || !Array.isArray(property.resolvedProperties))
-        throw Error("RepeatFieldBinding - Internal error: Expected array in 'property.resolvedProperties'");
+    let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
+    if (!resolvedProperties) {
+        resolvedProperties = getArrayResolvedProperties({
+            propertyValue: value,
+            propertyKey,
+            property,
+            ignoreMissingFields: false
+        })
+    }
 
     const expanded = property.expanded === undefined ? true : property.expanded;
     const ofProperty: ResolvedProperty<CMSType[]> = property.of as ResolvedProperty<CMSType[]>;
@@ -48,55 +55,66 @@ export function RepeatFieldBinding<T extends Array<any>>({
         setValue
     });
 
-    const buildEntry = (index: number, internalId: number) => {
-        const childProperty = property.resolvedProperties[index] ?? ofProperty;
-        const fieldProps = {
+    const buildEntry = ({
+                            index,
+                            internalId,
+                            storedProps,
+                            storeProps
+                        }: ArrayEntryParams) => {
+        const childProperty = resolvedProperties[index] ?? ofProperty;
+        const fieldProps: PropertyFieldBindingProps<any, any> = {
             propertyKey: `${propertyKey}.${index}`,
             disabled,
-            property: childProperty,
+            property: storedProps ? mergeDeep(childProperty, storedProps) : childProperty,
+            onPropertyChange: storeProps,
             includeDescription,
             underlyingValueHasChanged,
             context,
-            tableMode: false,
             partOfArray: true,
-            partOfBlock: false,
-            autoFocus: internalId === lastAddedId
+            minimalistView: false,
+            autoFocus: internalId === lastAddedId,
         };
         return <ErrorBoundary>
-            <PropertyFieldBinding {...fieldProps}/>
+            <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;
     };
 
-    const arrayContainer = <FormikArrayContainer value={value}
-                                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
-                                                 name={propertyKey}
-                                                 setFieldValue={setFieldValue}
-                                                 buildEntry={buildEntry}
-                                                 onInternalIdAdded={setLastAddedId}
-                                                 disabled={isSubmitting || Boolean(property.disabled)}
-                                                 includeAddButton={!property.disabled}
-                                                 newDefaultEntry={property.of.defaultValue}/>;
+    const arrayContainer = <ArrayContainer droppableId={propertyKey}
+                                           addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                           value={value}
+                                           buildEntry={buildEntry}
+                                           onInternalIdAdded={setLastAddedId}
+                                           disabled={isSubmitting || Boolean(property.disabled)}
+                                           includeAddButton={!property.disabled}
+                                           newDefaultEntry={getDefaultValueFor(property.of)}
+                                           onValueChange={(value) => setFieldValue(propertyKey, value)}
+    />;
 
-    const title = (<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                  required={property.validation?.required}
-                                  title={property.name}
-                                  className={"text-text-secondary dark:text-text-secondary-dark"}/>);
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     return (
 
         <>
 
-            {!tableMode && <ExpandablePanel initiallyExpanded={expanded}
-                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
-                                            title={title}>
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                 title={title}>
                 {arrayContainer}
             </ExpandablePanel>}
 
-            {tableMode && arrayContainer}
+            {minimalistView && arrayContainer}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
-                             error={error}
+                             error={error ? (typeof error === "string" ? error : "A property of this array/repeat has an error") : undefined}
                              disabled={disabled}
                              property={property}/>
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -3,9 +3,10 @@ import React, { useCallback } from "react";
 import { EnumType, FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
-import { getIconForProperty } from "../../util";
-import { ClearIcon, cn, IconButton, Select, SelectItem } from "@firecms/ui";
+import { getIconForProperty, resolveEnumValues } from "../../util";
+import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;
 
@@ -27,10 +28,11 @@ export function SelectFieldBinding<T extends EnumType>({
                                                            autoFocus,
                                                            touched,
                                                            property,
-                                                           includeDescription
+                                                           includeDescription,
+                                                           size = "medium"
                                                        }: SelectProps<T>) {
 
-    const enumValues = property.enumValues;
+    const enumValues = resolveEnumValues(property.enumValues ?? []);
 
     useClearRestoreValue({
         property,
@@ -48,15 +50,20 @@ export function SelectFieldBinding<T extends EnumType>({
         <>
 
             <Select
-                value={value ? value.toString() : ""}
+                size={size === "medium" ? "medium" : "small"}
+                value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
                 position="item-aligned"
-                inputClassName={cn("w-full")}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}
-                                      className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
-                />}
+                inputClassName={cls("w-full")}
+                label={
+                    <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                        <LabelWithIcon
+                            icon={getIconForProperty(property, "small")}
+                            required={property.validation?.required}
+                            title={property.name}
+                            className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
+                        />
+                    </PropertyIdCopyTooltip>}
                 endAdornment={
                     property.clearable && <IconButton
                         onClick={handleClearClick}>
@@ -73,7 +80,7 @@ export function SelectFieldBinding<T extends EnumType>({
                     return <EnumValuesChip
                         enumKey={enumKey}
                         enumValues={enumValues}
-                        size={"medium"}/>;
+                        size={size}/>;
                 }}
             >
                 {enumValues && enumValues.map((option) => {
@@ -83,7 +90,7 @@ export function SelectFieldBinding<T extends EnumType>({
                         <EnumValuesChip
                             enumKey={String(option.id)}
                             enumValues={enumValues}
-                            size={"medium"}/>
+                            size={size}/>
                     </SelectItem>
                 })}
             </Select>

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -2,36 +2,34 @@ import React, { useCallback } from "react";
 
 import {
     ArrayProperty,
-    Entity,
-    EntityCollection,
     FieldProps,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig
 } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
-import { getIconForProperty, isReadOnly } from "../../util";
+import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
 import { useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
 import { StorageItemPreview } from "../components/StorageItemPreview";
 import {
-    cn,
+    cls,
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
-    focusedMixin,
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 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 = "border-dotted-gray"
-const nonActiveDropClasses = "hover:bg-field-hover dark:hover:bg-field-hover-dark"
+const nonActiveDropClasses = fieldBackgroundHoverMixin
 const activeDropClasses = "pt-0 border-2 border-solid"
 const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500"
 const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500"
@@ -52,7 +50,7 @@ export function StorageUploadFieldBinding({
                                               error,
                                               showError,
                                               autoFocus,
-                                              tableMode,
+                                              minimalistView,
                                               property,
                                               includeDescription,
                                               context,
@@ -81,7 +79,7 @@ export function StorageUploadFieldBinding({
         propertyKey,
         value,
         storageSource,
-        disabled,
+        disabled: disabled ?? false,
         onChange: setValue
     });
 
@@ -91,33 +89,31 @@ export function StorageUploadFieldBinding({
         setValue
     });
 
-    const entity: Entity<any> = {
-        id: context.entityId,
-        values: context.values,
-        path: context.path
-    };
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     return (
 
         <>
 
-            {!tableMode &&
-                <LabelWithIcon icon={getIconForProperty(property, "small")}
-                               required={property.validation?.required}
-                               title={property.name}
-                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+            {!minimalistView &&
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}
-                collection={context.collection}
                 name={propertyKey}
-                disabled={disabled}
-                autoFocus={autoFocus}
-                property={property}
+                disabled={disabled ?? false}
+                autoFocus={autoFocus ?? false}
+                property={resolvedProperty}
                 onChange={setValue}
                 setInternalValue={setInternalValue}
                 onFilesAdded={onFilesAdded}
-                entity={entity}
                 onFileUploadComplete={onFileUploadComplete}
                 storagePathBuilder={storagePathBuilder}
                 storage={storage}
@@ -135,7 +131,6 @@ export function StorageUploadFieldBinding({
 
 function FileDropComponent({
                                storage,
-                               collection,
                                disabled,
                                isDraggingOver,
                                onFilesAdded,
@@ -144,7 +139,6 @@ function FileDropComponent({
                                autoFocus,
                                internalValue,
                                property,
-                               entity,
                                onClear,
                                metadata,
                                storagePathBuilder,
@@ -154,7 +148,6 @@ function FileDropComponent({
                                helpText
                            }: {
     storage: StorageConfig,
-    collection: EntityCollection,
     disabled: boolean,
     isDraggingOver: boolean,
     droppableProvided: any,
@@ -165,7 +158,6 @@ function FileDropComponent({
     property: ResolvedStringProperty,
     onClear: (clearedStoragePathOrDownloadUrl: string) => void,
     metadata: any,
-    entity: Entity<any>;
     storagePathBuilder: (file: File) => string,
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
     size: PreviewSize,
@@ -190,10 +182,18 @@ function FileDropComponent({
             onDropRejected: (fileRejections, event) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        snackbarContext.open({
-                            type: "error",
-                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                        });
+                        console.error("Error uploading file: ", error);
+                        if (error.code === "file-too-large") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                            });
+                        } else if (error.code === "file-invalid-type") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: "Error uploading file: File type is not supported"
+                            });
+                        }
                     }
                 }
             }
@@ -203,12 +203,11 @@ function FileDropComponent({
     return (
         <div
             {...getRootProps()}
-            className={cn(
+            className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
-                focusedMixin,
                 {
                     [nonActiveDropClasses]: !isDragActive,
                     [activeDropClasses]: isDragActive,
@@ -220,7 +219,7 @@ function FileDropComponent({
             <div
                 {...droppableProvided.droppableProps}
                 ref={droppableProvided.innerRef}
-                className={cn("flex items-center p-1 no-scrollbar",
+                className={cls("flex items-center p-1 no-scrollbar",
                     multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
                     multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
                 )}
@@ -235,11 +234,9 @@ function FileDropComponent({
                     if (entry.storagePathOrDownloadUrl) {
                         child = (
                             <StorageItemPreview
-                                collection={collection}
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
                                 property={property}
                                 disabled={disabled}
-                                entity={entity}
                                 value={entry.storagePathOrDownloadUrl}
                                 onRemove={onClear}
                                 size={entry.size}/>
@@ -268,7 +265,7 @@ function FileDropComponent({
                                     ref={provided.innerRef}
                                     {...provided.draggableProps}
                                     {...provided.dragHandleProps}
-                                    className={cn(focusedMixin, "rounded-md")}
+                                    className={cls("rounded-md")}
                                     style={{
                                         ...provided.draggableProps.style
                                     }}
@@ -299,7 +296,6 @@ function FileDropComponent({
 
 export interface StorageUploadProps {
     value: StorageFieldItem[];
-    collection: EntityCollection;
     setInternalValue: (v: StorageFieldItem[]) => void;
     name: string;
     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
@@ -307,7 +303,6 @@ export interface StorageUploadProps {
     multipleFilesSupported: boolean;
     autoFocus: boolean;
     disabled: boolean;
-    entity: Entity<any>;
     storage: StorageConfig;
     onFilesAdded: (acceptedFiles: File[]) => void;
     storagePathBuilder: (file: File) => string;
@@ -315,7 +310,6 @@ export interface StorageUploadProps {
 }
 
 export function StorageUpload({
-                                  collection,
                                   property,
                                   name,
                                   value,
@@ -327,7 +321,6 @@ export function StorageUpload({
                                   onFilesAdded,
                                   autoFocus,
                                   storage,
-                                  entity,
                                   storagePathBuilder,
                               }: StorageUploadProps) {
 
@@ -408,11 +401,10 @@ export function StorageUpload({
                             className="rounded"
                         >
                             <StorageItemPreview
-                                collection={collection}
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
+                                placeholder={true}
                                 property={renderProperty}
                                 disabled={true}
-                                entity={entity}
                                 value={entry.storagePathOrDownloadUrl as string}
                                 onRemove={onClear}
                                 size={entry.size}/>
@@ -422,7 +414,6 @@ export function StorageUpload({
             >
                 {(provided, snapshot) => {
                     return <FileDropComponent storage={storage}
-                                              collection={collection}
                                               disabled={disabled}
                                               isDraggingOver={snapshot.isDraggingOver}
                                               droppableProvided={provided}
@@ -431,7 +422,6 @@ export function StorageUpload({
                                               autoFocus={autoFocus}
                                               internalValue={value}
                                               property={renderProperty}
-                                              entity={entity}
                                               onClear={onClear}
                                               metadata={metadata}
                                               storagePathBuilder={storagePathBuilder}