refactor(core): refactor input upload support

This will streamline how inputs handle drag and drop + paste files.

It will add asset source support to array of object uploads as well.

Author: skogsmaskin

packages/sanity/src/core/components/previews/portableText/BlockPreview.tsx

@@ -2,6 +2,7 @@ import {Box, Flex, rem, Stack, Text} from '@sanity/ui'
 import {styled} from 'styled-components'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
 
+import {LinearProgress} from '../../progress/LinearProgress'
 import {Media} from '../_common/Media'
 import {PREVIEW_SIZES} from '../constants'
 import {renderPreviewNode} from '../helpers'
@@ -29,10 +30,13 @@ export function BlockPreview(props: Omit<PreviewProps<'block'>, 'renderDefault'>
     description,
     mediaDimensions = DEFAULT_MEDIA_DIMENSIONS,
     media,
+    progress,
     status,
     children,
   } = props
 
+  const isUploading = typeof progress === 'number' && progress > -1
+
   return (
     <Stack data-testid="block-preview" space={1}>
       <HeaderFlex data-testid="block-preview__header">
@@ -58,6 +62,12 @@ export function BlockPreview(props: Omit<PreviewProps<'block'>, 'renderDefault'>
               </Text>
             </Box>
           )}
+
+          {isUploading && (
+            <Box marginTop={3}>
+              <LinearProgress value={progress} />
+            </Box>
+          )}
         </Box>
 
         <Flex gap={1} paddingLeft={1}>

packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx

@@ -18,7 +18,7 @@ import {EMPTY_ARRAY} from '../../../util'
 import {ActivateOnFocus} from '../../components/ActivateOnFocus/ActivateOnFocus'
 import {type ArrayOfObjectsInputProps, type RenderCustomMarkers} from '../../types'
 import {type RenderBlockActionsCallback} from '../../types/_transitional'
-import {UploadTargetCard} from '../arrays/common/UploadTargetCard'
+import {UploadTargetCard} from '../files/common/uploadTarget/UploadTargetCard'
 import {ExpandedLayer, Root, StringDiffContainer} from './Compositor.styles'
 import {useSetPortableTextMemberItemElementRef} from './contexts/PortableTextMemberItemElementRefsProvider'
 import {Editor} from './Editor'
@@ -67,6 +67,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
     onItemRemove,
     onPaste,
     onPathFocus,
+    onSelectFile,
     onToggleFullscreen,
     onUpload,
     path,
@@ -81,7 +82,6 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
     renderInput,
     renderItem,
     renderPreview,
-    resolveUploader,
     value,
   } = props
 
@@ -404,10 +404,12 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
   const editorNode = useMemo(
     () => (
       <UploadTargetCard
-        types={editor.schemaTypes.portableText.of}
-        resolveUploader={resolveUploader}
+        isReadOnly={readOnly}
+        onSelectFile={onSelectFile}
         onUpload={onUpload}
+        pasteTargetRef={elementRef}
         tabIndex={-1}
+        types={editor.schemaTypes.portableText.of}
       >
         <StringDiffContainer>
           <Editor
@@ -439,27 +441,27 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
 
     // Keep only stable ones here!
     [
-      ariaDescribedBy,
       editor.schemaTypes.portableText.of,
-      editorHotkeys,
-      editorRenderAnnotation,
-      editorRenderBlock,
-      editorRenderChild,
+      onUpload,
+      onSelectFile,
+      ariaDescribedBy,
       elementRef,
-      handleToggleFullscreen,
-      hideToolbar,
       initialSelection,
+      hideToolbar,
+      editorHotkeys,
       isActive,
       isFullscreen,
       isOneLineEditor,
-      onCopy,
       onItemOpen,
+      onCopy,
       onPaste,
+      handleToggleFullscreen,
       path,
-      onUpload,
-      resolveUploader,
       rangeDecorations,
       readOnly,
+      editorRenderAnnotation,
+      editorRenderBlock,
+      editorRenderChild,
       scrollElement,
     ],
   )

packages/sanity/src/core/form/inputs/PortableText/PortableTextInput.tsx

@@ -4,7 +4,6 @@ import {
   EditorProvider,
   type EditorSelection,
   type InvalidValue,
-  type OnPasteFn,
   type Patch,
   PortableTextEditor,
   type RangeDecoration,
@@ -14,9 +13,8 @@ import {
 import {EventListenerPlugin} from '@portabletext/editor/plugins'
 import {useTelemetry} from '@sanity/telemetry/react'
 import {isKeySegment, type Path, type PortableTextBlock} from '@sanity/types'
-import {Box, Flex, Text, useToast} from '@sanity/ui'
+import {Box, useToast} from '@sanity/ui'
 import {randomKey} from '@sanity/util/content'
-import {sortBy} from 'lodash'
 import {
   forwardRef,
   type ReactNode,
@@ -29,7 +27,6 @@ import {
   useState,
 } from 'react'
 
-import {useTranslation} from '../../../i18n'
 import {usePerspective} from '../../../perspective/usePerspective'
 import {EMPTY_ARRAY} from '../../../util'
 import {pathToString} from '../../../validation/util/pathToString'
@@ -40,9 +37,7 @@ import {
 import {SANITY_PATCH_TYPE} from '../../patch'
 import {type ArrayOfObjectsItemMember, type ObjectFormNode} from '../../store'
 import {immutableReconcile} from '../../store/utils/immutableReconcile'
-import {type ResolvedUploader} from '../../studio/uploads/types'
 import {type PortableTextInputProps} from '../../types'
-import {extractPastedFiles} from '../common/fileTarget/utils/extractFiles'
 import {Compositor} from './Compositor'
 import {useFullscreenPTE} from './contexts/fullscreen'
 import {PortableTextMarkersProvider} from './contexts/PortableTextMarkers'
@@ -58,14 +53,8 @@ import {
   type PresenceCursorDecorationsHookProps,
   usePresenceCursorDecorations,
 } from './presence-cursors'
-import {getUploadCandidates} from './upload/helpers'
 import {usePatches} from './usePatches'
 
-interface UploadTask {
-  file: File
-  uploaderCandidates: ResolvedUploader[]
-}
-
 function keyGenerator() {
   return randomKey(12)
 }
@@ -129,8 +118,6 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode {
     renderCustomMarkers,
     schemaType,
     value,
-    resolveUploader,
-    onUpload,
     displayInlineChanges,
   } = props
 
@@ -157,7 +144,6 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode {
       displayInlineChanges,
     })
 
-  const {t} = useTranslation()
   const [ignoreValidationError, setIgnoreValidationError] = useState(false)
   const [invalidValue, setInvalidValue] = useState<InvalidValue | null>(null)
   const [isActive, setIsActive] = useState(initialActive ?? true)
@@ -354,85 +340,6 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode {
     return reconciled
   }, [diffRangeDecorations, displayInlineChanges, presenceCursorDecorations, rangeDecorationsProp])
 
-  const uploadFile = useCallback(
-    (file: File, resolvedUploader: ResolvedUploader) => {
-      const {type, uploader} = resolvedUploader
-      onUpload?.({file, schemaType: type, uploader})
-    },
-    [onUpload],
-  )
-
-  const handleFiles = useCallback(
-    (files: File[]) => {
-      if (!resolveUploader) {
-        return
-      }
-      const tasks: UploadTask[] = files.map((file) => ({
-        file,
-        uploaderCandidates: getUploadCandidates(schemaType.of, resolveUploader, file),
-      }))
-      const readyTasks = tasks.filter((task) => task.uploaderCandidates.length > 0)
-      const rejected: UploadTask[] = tasks.filter((task) => task.uploaderCandidates.length === 0)
-
-      if (rejected.length > 0) {
-        toast.push({
-          closable: true,
-          status: 'warning',
-          title: t('inputs.array.error.cannot-upload-unable-to-convert', {
-            count: rejected.length,
-          }),
-          description: rejected.map((task, i) => (
-            // oxlint-disable-next-line no-array-index-key
-            <Flex key={i} gap={2} padding={2}>
-              <Box>
-                <Text weight="medium">{task.file.name}</Text>
-              </Box>
-              <Box>
-                <Text size={1}>({task.file.type})</Text>
-              </Box>
-            </Flex>
-          )),
-        })
-      }
-
-      // todo: consider if we should to ask the user here
-      // the list of candidates is sorted by their priority and the first one is selected
-      readyTasks.forEach((task) => {
-        uploadFile(
-          task.file,
-          sortBy(task.uploaderCandidates, (candidate) => candidate.uploader.priority)[0],
-        )
-      })
-    },
-    [toast, resolveUploader, schemaType, uploadFile, t],
-  )
-
-  const handlePaste: OnPasteFn = useCallback(
-    (input) => {
-      const {event} = input
-
-      // Some applications may put both text and files on the clipboard when content is copied.
-      // If we have both text and html on the clipboard, just ignore the files if this is a paste event.
-      // Drop events will most probably be files so skip this test for those.
-      const eventType = event.type === 'paste' ? 'paste' : 'drop'
-      const hasHtml = !!event.clipboardData.getData('text/html')
-      const hasText = !!event.clipboardData.getData('text/plain')
-      if (eventType === 'paste' && hasHtml && hasText) {
-        return onPaste?.(input)
-      }
-
-      void extractPastedFiles(event.clipboardData)
-        .then((files) => {
-          return files.length > 0 ? files : []
-        })
-        .then((files) => {
-          handleFiles(files)
-        })
-      return onPaste?.(input)
-    },
-    [handleFiles, onPaste],
-  )
-
   return (
     <Box>
       {!ignoreValidationError && respondToInvalidContent}
@@ -467,7 +374,7 @@ export function PortableTextInput(props: PortableTextInputProps): ReactNode {
                 onItemRemove={onItemRemove}
                 onCopy={onCopy}
                 onInsert={onInsert}
-                onPaste={handlePaste}
+                onPaste={onPaste}
                 onToggleFullscreen={handleToggleFullscreen}
                 rangeDecorations={rangeDecorations}
                 readOnly={readOnly || !ready}

packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx

@@ -1,5 +1,11 @@
 import {type EditorSelection, PortableTextEditor, usePortableTextEditor} from '@portabletext/editor'
-import {isImage, type ObjectSchemaType, type Path, type PortableTextBlock} from '@sanity/types'
+import {
+  isImage,
+  type ObjectSchemaType,
+  type Path,
+  type PortableTextBlock,
+  type UploadState,
+} from '@sanity/types'
 import {Box, Flex, type ResponsivePaddingProps} from '@sanity/ui'
 import {isEqual} from '@sanity/util/paths'
 import {
@@ -20,6 +26,7 @@ import {EMPTY_ARRAY} from '../../../../util'
 import {useFormCallbacks} from '../../../studio'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {useEnhancedObjectDialog} from '../../../studio/tree-editing/context/enabled/useEnhancedObjectDialog'
+import {UPLOAD_STATUS_KEY} from '../../../studio/uploads/constants'
 import {
   type BlockProps,
   type RenderAnnotationCallback,
@@ -384,6 +391,10 @@ export const DefaultBlockObjectComponent = (
   const hasMarkers = Boolean(markers.length > 0)
   const tone = selected || focused ? 'primary' : 'default'
 
+  const uploadState = (value as any)[UPLOAD_STATUS_KEY] as UploadState | undefined
+  const uploadProgress =
+    typeof uploadState?.progress === 'number' ? uploadState?.progress : undefined
+
   const handleDoubleClickToOpen = useCallback(
     (e: MouseEvent<Element, globalThis.MouseEvent>) => {
       e.preventDefault()
@@ -421,6 +432,7 @@ export const DefaultBlockObjectComponent = (
               value={value}
             />
           ),
+          progress: uploadProgress,
           layout: isImagePreview ? 'blockImage' : 'block',
           schemaType,
           skipVisibilityCheck: true,

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/Grid/GridArrayInput.tsx

@@ -8,8 +8,8 @@ import {
   type ObjectItem,
   type ObjectItemProps,
 } from '../../../../types'
+import {UploadTargetCard} from '../../../files/common/uploadTarget/UploadTargetCard'
 import {Item, List} from '../../common/list'
-import {UploadTargetCard} from '../../common/UploadTargetCard'
 import {ArrayOfObjectsFunctions} from '../ArrayOfObjectsFunctions'
 import {createProtoArrayValue} from '../createProtoArrayValue'
 import {ErrorItem} from './ErrorItem'
@@ -26,6 +26,7 @@ export function GridArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
     onItemPrepend,
     onItemAppend,
     onItemMove,
+    onSelectFile,
     onUpload,
     readOnly,
     renderAnnotation,
@@ -34,7 +35,6 @@ export function GridArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
     renderInlineBlock,
     renderInput,
     renderPreview,
-    resolveUploader,
     schemaType,
     value = EMPTY,
   } = props
@@ -52,11 +52,12 @@ export function GridArrayInput<Item extends ObjectItem>(props: ArrayOfObjectsInp
   return (
     <Stack space={2}>
       <UploadTargetCard
-        types={schemaType.of}
-        resolveUploader={resolveUploader}
-        onUpload={onUpload}
         {...elementProps}
+        isReadOnly={readOnly}
+        onSelectFile={onSelectFile}
+        onUpload={onUpload}
         tabIndex={0}
+        types={schemaType.of}
       >
         <Stack data-ui="ArrayInput__content" space={2}>
           {members?.length === 0 && (