From 1b7e45b03bf5f043b5ebefb3d6a4ef812678efe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rge=20N=C3=A6ss?= <bjoerge@gmail.com>
Date: Fri, 13 Oct 2023 05:50:30 +0200
Subject: [PATCH] feat(i18n): convert file, image and imagetool input strings
 to use i18n primitives (#4984)

---
 .../plugins/locale-no-nb/bundles/studio.ts    | 109 ++++++++++++++++++
 .../FileInput/__tests__/fileInput.test.tsx    |   8 +-
 .../files/ImageInput/ImageActionsMenu.tsx     |   6 +-
 .../inputs/files/ImageInput/ImageInput.tsx    |  16 +--
 .../inputs/files/ImageInput/ImagePreview.tsx  |  23 ++--
 .../files/ImageInput/InvalidImageWarning.tsx  |   9 +-
 .../files/ImageToolInput/ImageToolInput.tsx   |   6 +-
 .../form/inputs/files/common/ActionsMenu.tsx  |  33 ++++--
 .../form/inputs/files/common/DropMessage.tsx  |  16 +--
 .../inputs/files/common/PlaceholderText.tsx   |  21 ++--
 .../inputs/files/common/UploadPlaceholder.tsx |   1 +
 .../inputs/files/common/UploadProgress.tsx    |  19 +--
 .../inputs/files/common/UploadWarning.tsx     |  18 ++-
 .../src/core/form/inputs/files/constants.ts   |   6 +
 .../form/studio/inputs/StudioImageInput.tsx   |   3 +
 .../sanity/src/core/i18n/bundles/studio.ts    | 105 +++++++++++++++++
 .../sanity/test/form/renderImageInput.tsx     |   1 +
 17 files changed, 335 insertions(+), 65 deletions(-)
 create mode 100644 packages/sanity/src/core/form/inputs/files/constants.ts

diff --git a/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts b/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts
index 8c48f5bd90e6..4a1c0f79feda 100644
--- a/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts
+++ b/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts
@@ -262,6 +262,115 @@ const studioResources: Record<StudioLocaleResourceKeys, string> = {
   /** Error label for toast when array could not resolve the initial value */
   'inputs.array.error.cannot-resolve-initial-value-title':
     'Kan ikke finne startverdi for type: {{schemaTypeTitle}}: {{errorMessage}}.',
+
+  /** --- File (Image, File and ImageTool) Inputs --- */
+
+  /** Open image edit dialog */
+  'inputs.files.image.actions-menu.edit-details.label': 'Åpne bilderedigeringsdialog',
+
+  /** Open image options menu */
+  'inputs.files.image.actions-menu.options.label': 'Åpne bildeinnstillingsmeny',
+
+  /** The upload could not be completed at this time. */
+  'inputs.files.image.upload-error.description':
+    'Opplastingen kunne ikke fullføres på dette tidspunktet.',
+
+  /** Upload failed */
+  'inputs.files.image.upload-error.title': 'Opplasting mislyktes',
+
+  /** Edit hotspot and crop */
+  'inputs.files.image.hotspot-dialog.title': 'Rediger fokuspunkt og beskjær',
+
+  /** Preview of uploaded image */
+  'inputs.files.image.preview-uploaded-image': 'Forhåndsvisning av opplastet bilde',
+
+  /** Cannot upload this file here */
+  'inputs.files.image.drag-overlay.cannot-upload-here': 'Kan ikke laste opp denne filen her',
+
+  /** This field is read only */
+  'inputs.files.image.drag-overlay.this-field-is-read-only': 'Dette feltet er skrivebeskyttet',
+
+  /** Drop image to upload */
+  'inputs.files.image.drag-overlay.drop-to-upload-image': 'Slipp bilde for å laste opp',
+
+  /** Invalid image value */
+  'inputs.files.image.invalid-image-warning.title': 'Ugyldig bildeverdi',
+
+  /** The value of this field is not a valid image. Resetting this field will let you choose a new image. */
+  'inputs.files.image.invalid-image-warning.description':
+    'Verdien i dette feltet er ikke et gyldig bilde. Ved å tilbakestille dette feltet kan du velge et nytt bilde.',
+
+  /** The URL is copied to the clipboard */
+  'inputs.files.common.actions-menu.notification.url-copied':
+    'URL-en er kopiert til utklippstavlen',
+
+  /** Replace */
+  'inputs.files.common.actions-menu.replace.label': 'Erstatt',
+
+  /** Upload */
+  'inputs.files.common.actions-menu.upload.label': 'Last opp',
+
+  /** Download */
+  'inputs.files.common.actions-menu.download.label': 'Last ned',
+
+  /** Copy URL */
+  'inputs.files.common.actions-menu.copy-url.label': 'Kopier URL',
+
+  /** Clear field */
+  'inputs.files.common.actions-menu.clear-field.label': 'Tøm felt',
+
+  /** Can't upload files here */
+  'inputs.files.common.placeholder.upload-not-supported': 'Kan ikke laste opp filer her',
+
+  /** Read only */
+  'inputs.files.common.placeholder.read-only': 'Skrivebeskyttet',
+
+  /** Drop to upload file */
+  'inputs.files.common.placeholder.drop-to-upload_file': 'Slipp for å laste opp fil',
+
+  /** Drop to upload image */
+  'inputs.files.common.placeholder.drop-to-upload_image': 'Slipp for å laste opp bilde',
+
+  /** Cannot upload `{{count}}` files */
+  'inputs.files.common.placeholder.cannot-upload-some-files_one': 'Kan ikke laste opp fil',
+  'inputs.files.common.placeholder.cannot-upload-some-files_other':
+    'Kan ikke laste opp {{count}} filer',
+
+  /** Drag or paste file here */
+  'inputs.files.common.placeholder.drag-or-paste-to-upload_file': 'Dra eller lim inn fil her',
+  /** Drag or paste image here */
+  'inputs.files.common.placeholder.drag-or-paste-to-upload_image': 'Dra eller lim inn bilde her',
+
+  /** Drop to upload */
+  'inputs.files.common.drop-message.drop-to-upload': 'Slipp for å laste opp',
+
+  /** Drop to upload `{{count}}` file */
+  'inputs.files.common.drop-message.drop-to-upload-multi_one':
+    'Slipp for å laste opp {{count}} fil',
+
+  /** Drop to upload `{{count}}` files */
+  'inputs.files.common.drop-message.drop-to-upload-multi_other':
+    'Slipp for å laste opp {{count}} filer',
+
+  /** Uploading <FileName/> */
+  'input.files.common.upload-progress': 'Laster opp <FileName/>',
+
+  /** Incomplete upload */
+  'inputs.files.common.stale-upload-warning.title': 'Ufullstendig opplasting',
+
+  /** An upload has made no progress for at least `{{staleThresholdMinutes}}` minutes and likely got interrupted. You can safely clear the incomplete upload and try uploading again. */
+  'inputs.files.common.stale-upload-warning.description':
+    'En opplasting har ikke gjort fremskritt på minst {{staleThresholdMinutes}} minutter og ble sannsynligvis avbrutt. Du kan trygt fjerne den ufullstendige opplastingen og prøve å laste opp på nytt.',
+
+  /** Clear upload */
+  'inputs.files.common.stale-upload-warning.clear': 'Fjern opplasting',
+
+  /** Hotspot & Crop */
+  'inputs.files.imagetool.field.title': 'Fokuspunkt & beskjæring',
+
+  /** Adjust the rectangle to crop image. Adjust the circle to specify the area that should always be visible. */
+  'inputs.files.imagetool.field.description':
+    'Juster rektangelet for å beskjære bildet. Juster sirkelen for å spesifisere området som alltid skal være synlig.',
 }
 
 export default studioResources
diff --git a/packages/sanity/src/core/form/inputs/files/FileInput/__tests__/fileInput.test.tsx b/packages/sanity/src/core/form/inputs/files/FileInput/__tests__/fileInput.test.tsx
index 72ffe8edf274..d7aaf58479c9 100644
--- a/packages/sanity/src/core/form/inputs/files/FileInput/__tests__/fileInput.test.tsx
+++ b/packages/sanity/src/core/form/inputs/files/FileInput/__tests__/fileInput.test.tsx
@@ -28,9 +28,7 @@ describe('FileInput with empty state', () => {
       observeAsset: observeAssetStub,
       render: (inputProps) => <BaseFileInput {...inputProps} />,
     })
-
     expect(result.queryByTestId('file-button-input')!.getAttribute('value')).toBe('')
-    expect(result.queryByText('Drag or paste file here')).toBeInTheDocument()
   })
 
   it.todo('renders new file when a new file in uploaded')
@@ -127,7 +125,9 @@ describe('FileInput with empty state', () => {
       render: (inputProps) => <BaseFileInput {...inputProps} directUploads={false} />,
     })
 
-    expect(result.queryByText(`Can't upload files here`)).toBeInTheDocument()
+    expect(result.queryByTestId('file-input-upload-button')!.getAttribute('data-disabled')).toBe(
+      'true',
+    )
   })
 
   /* readOnly - the file input is read only or not */
@@ -184,7 +184,7 @@ describe('FileInput with empty state', () => {
     })
 
     await waitFor(() => {
-      expect(result.queryByText(`Read only`)).toBeInTheDocument()
+      expect(result.queryByText(`inputs.files.common.placeholder.read-only`)).toBeInTheDocument()
     })
   })
 
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
index 93a02fad7909..032cf5211ffd 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageActionsMenu.tsx
@@ -2,6 +2,7 @@ import React, {MouseEventHandler, ReactNode, useCallback, useEffect, useState} f
 import {EllipsisVerticalIcon, CropIcon} from '@sanity/icons'
 import {Button, Inline, Menu, Popover, useClickOutside, useGlobalKeyDown} from '@sanity/ui'
 import styled from 'styled-components'
+import {useTranslation} from '../../../../i18n'
 
 export const MenuActionsWrapper = styled(Inline)`
   position: absolute;
@@ -79,11 +80,12 @@ export function ImageActionsMenu(props: ImageActionsMenuProps) {
     }
   }, [isMenuOpen, menuElement])
 
+  const {t} = useTranslation()
   return (
     <MenuActionsWrapper data-buttons space={1} padding={2}>
       {showEdit && (
         <Button
-          aria-label="Open image edit dialog"
+          aria-label={t('inputs.files.image.actions-menu.edit-details.label')}
           data-testid="options-menu-edit-details"
           icon={CropIcon}
           mode="ghost"
@@ -101,7 +103,7 @@ export function ImageActionsMenu(props: ImageActionsMenuProps) {
         constrainSize
       >
         <Button
-          aria-label="Open image options menu"
+          aria-label={t('inputs.files.image.actions-menu.options.label')}
           data-testid="options-menu-button"
           icon={EllipsisVerticalIcon}
           mode="ghost"
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index 41de27bfa8e9..5c02b0f2c13c 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -52,6 +52,7 @@ import {PresenceOverlay} from '../../../../presence'
 import {FIXME} from '../../../../FIXME'
 import {ImperativeToast} from '../../../../components'
 import {ChangeIndicator} from '../../../../changeIndicators'
+import {TFunction} from '../../../../i18n'
 import {ImageActionsMenu} from './ImageActionsMenu'
 import {ImagePreview} from './ImagePreview'
 import {InvalidImageWarning} from './InvalidImageWarning'
@@ -74,6 +75,7 @@ export interface BaseImageInputProps
   observeAsset: (documentId: string) => Observable<ImageAsset>
   resolveUploader: UploaderResolver
   client: SanityClient
+  t: (key: string, values?: Record<string, string>) => string
 }
 
 const getDevicePixelRatio = () => {
@@ -182,7 +184,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
   }
 
   uploadWith = (uploader: Uploader, file: File, assetDocumentProps: UploadOptions = {}) => {
-    const {schemaType, onChange, client} = this.props
+    const {schemaType, onChange, client, t} = this.props
     const {label, title, description, creditLine, source} = assetDocumentProps
     const options = {
       metadata: get(schemaType, 'options.metadata'),
@@ -208,8 +210,8 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
         console.error(err)
         this.toast?.push({
           status: 'error',
-          description: 'The upload could not be completed at this time.',
-          title: 'Upload failed',
+          description: t('inputs.files.image.upload-error.description'),
+          title: t('inputs.files.image.upload-error.title'),
         })
 
         this.clearUploadStatus()
@@ -395,14 +397,14 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
   }
 
   renderHotspotInput = (hotspotInputProps: Omit<InputProps, 'renderDefault'>) => {
-    const {value, changed, id, imageUrlBuilder} = this.props
+    const {value, changed, id, imageUrlBuilder, t} = this.props
 
     const withImageTool = this.isImageToolEnabled() && value && value.asset
 
     return (
       <Dialog
         __unstable_autoFocus={false}
-        header="Edit hotspot and crop"
+        header={t('inputs.files.image.hotspot-dialog.title')}
         id={`${id}_dialog`}
         onClickOutside={this.handleCloseDialog}
         onClose={this.handleCloseDialog}
@@ -428,7 +430,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
   }
 
   renderPreview = () => {
-    const {value, schemaType, readOnly, directUploads, imageUrlBuilder, resolveUploader} =
+    const {value, schemaType, readOnly, directUploads, imageUrlBuilder, t, resolveUploader} =
       this.props
 
     if (!value || !isImageSource(value)) {
@@ -454,7 +456,7 @@ export class BaseImageInput extends React.PureComponent<BaseImageInputProps, Bas
         isRejected={rejectedFilesCount > 0 || !directUploads}
         readOnly={readOnly}
         src={imageUrl}
-        alt="Preview of uploaded image"
+        alt={t('inputs.files.image.preview-uploaded-image')}
       />
     )
   }
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
index a191df0e5c3b..e132ba4a231a 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -2,6 +2,7 @@ import React, {ComponentProps, useCallback, useEffect, useState} from 'react'
 
 import {AccessDeniedIcon, ImageIcon, ReadOnlyIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Heading, Text, useElementRect} from '@sanity/ui'
+import {useTranslation} from '../../../../i18n'
 import {
   MAX_DEFAULT_HEIGHT,
   RatioBox,
@@ -67,6 +68,7 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
     setLoaded(true)
   }, [])
 
+  const {t} = useTranslation()
   return (
     <RatioBox {...rest} ref={setRootElement} style={{height: rootHeight}} tone="transparent">
       <Card data-container tone="inherit">
@@ -91,7 +93,7 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
                   <HoverIcon isRejected={isRejected} readOnly={readOnly} />
                 </Heading>
               </Box>
-              <HoverText isRejected={isRejected} readOnly={readOnly} />
+              <Text size={1}>{t(getHoverTextTranslationKey({isRejected, readOnly}))}</Text>
             </>
           }
         />
@@ -110,16 +112,19 @@ function HoverIcon({isRejected, readOnly}: {isRejected: boolean; readOnly?: bool
   return <ImageIcon />
 }
 
-function HoverText({isRejected, readOnly}: {isRejected: boolean; readOnly?: boolean}) {
-  let message = 'Drop image to upload'
+function getHoverTextTranslationKey({
+  isRejected,
+  readOnly,
+}: {
+  isRejected: boolean
+  readOnly?: boolean
+}) {
   if (isRejected) {
-    message = 'Cannot upload this file here'
+    return 'inputs.files.image.drag-overlay.this-field-is-read-only'
   }
-  if (readOnly) {
-    message = 'This field is read only'
-  }
-
-  return <Text size={1}>{message}</Text>
+  return readOnly
+    ? 'inputs.files.image.drag-overlay.cannot-upload-here'
+    : 'inputs.files.image.drag-overlay.drop-to-upload-image'
 }
 
 function OverlayComponent({
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
index acf731ac2303..e2c93fb87c2d 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/InvalidImageWarning.tsx
@@ -2,6 +2,7 @@ import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
+import {useTranslation} from '../../../../i18n'
 
 type Props = {
   onClearValue?: () => void
@@ -12,6 +13,7 @@ const ButtonWrapper = styled(Button)`
 `
 
 export function InvalidImageWarning({onClearValue}: Props) {
+  const {t} = useTranslation('sanity')
   return (
     <Card tone="caution" padding={4} border radius={2}>
       <Flex gap={4} marginBottom={4}>
@@ -22,12 +24,9 @@ export function InvalidImageWarning({onClearValue}: Props) {
         </Box>
         <Stack space={3}>
           <Text size={1} weight="semibold">
-            Invalid image value
-          </Text>
-          <Text size={1}>
-            The value of this field is not a valid image. Resetting this field will let you choose a
-            new image.
+            {t('inputs.files.image.invalid-image-warning.title')}
           </Text>
+          <Text size={1}>{t('inputs.files.image.invalid-image-warning.description')}</Text>
         </Stack>
       </Flex>
       <ButtonWrapper icon={ResetIcon} text="Reset value" onClick={onClearValue} mode="ghost" />
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
index 2902a165fb41..104c08cf3d2d 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
@@ -9,6 +9,7 @@ import type {ObjectInputProps} from '../../../types'
 import {useDidUpdate} from '../../../hooks/useDidUpdate'
 import {ChangeIndicator} from '../../../../changeIndicators'
 import {EMPTY_ARRAY} from '../../../../util'
+import {useTranslation} from '../../../../i18n'
 import {ImageTool, HotspotImage, DEFAULT_CROP, DEFAULT_HOTSPOT} from './imagetool'
 import {useLoadImage} from './useLoadImage'
 
@@ -108,11 +109,12 @@ export function ImageToolInput(props: ImageToolInputProps) {
     [onChange, readOnly, schemaType.fields],
   )
 
+  const {t} = useTranslation()
   return (
     <FormField
-      title="Hotspot &amp; crop"
+      title={t('inputs.files.imagetool.field.title')}
       level={level}
-      description="Adjust the rectangle to crop image. Adjust the circle to specify the area that should always be visible."
+      description={t('inputs.files.imagetool.field.description')}
       __unstable_presence={presence}
     >
       <div>
diff --git a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
index d254d1bd6538..208173e9399d 100644
--- a/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/ActionsMenu.tsx
@@ -2,6 +2,7 @@ import React, {MouseEventHandler, useCallback} from 'react'
 
 import {UploadIcon, CopyIcon, ResetIcon, DownloadIcon} from '@sanity/icons'
 import {Box, MenuItem, MenuDivider, Label, useToast} from '@sanity/ui'
+import {useTranslation} from '../../../../i18n'
 import {FileInputMenuItem} from './FileInputMenuItem/FileInputMenuItem'
 
 interface Props {
@@ -19,17 +20,22 @@ export function ActionsMenu(props: Props) {
   const {onUpload, onReset, readOnly, accept, directUploads, browse, downloadUrl, copyUrl} = props
 
   const {push: pushToast} = useToast()
+  const {t} = useTranslation()
 
   const handleCopyURL = useCallback(() => {
     navigator.clipboard.writeText(copyUrl || '')
-    pushToast({closable: true, status: 'success', title: 'The URL is copied to the clipboard'})
-  }, [pushToast, copyUrl])
+    pushToast({
+      closable: true,
+      status: 'success',
+      title: t('inputs.files.common.actions-menu.notification.url-copied'),
+    })
+  }, [copyUrl, pushToast, t])
 
   return (
     <>
       <Box padding={2}>
         <Label muted size={1}>
-          Replace
+          {t('inputs.files.common.actions-menu.replace.label')}
         </Label>
       </Box>
       <FileInputMenuItem
@@ -37,7 +43,7 @@ export function ActionsMenu(props: Props) {
         mode="bleed"
         onSelect={onUpload}
         accept={accept}
-        text="Upload"
+        text={t('inputs.files.common.actions-menu.upload.label')}
         data-testid="file-input-upload-button"
         disabled={readOnly || !directUploads}
         fontSize={2}
@@ -45,14 +51,27 @@ export function ActionsMenu(props: Props) {
       {browse}
 
       {(downloadUrl || copyUrl) && <MenuDivider />}
-      {downloadUrl && <MenuItem as="a" icon={DownloadIcon} text="Download" href={downloadUrl} />}
-      {copyUrl && <MenuItem icon={CopyIcon} text="Copy URL" onClick={handleCopyURL} />}
+      {downloadUrl && (
+        <MenuItem
+          as="a"
+          icon={DownloadIcon}
+          text={t('inputs.files.common.actions-menu.download.label')}
+          href={downloadUrl}
+        />
+      )}
+      {copyUrl && (
+        <MenuItem
+          icon={CopyIcon}
+          text={t('inputs.files.common.actions-menu.copy-url.label')}
+          onClick={handleCopyURL}
+        />
+      )}
 
       <MenuDivider />
       <MenuItem
         tone="critical"
         icon={ResetIcon}
-        text="Clear field"
+        text={t('inputs.files.common.actions-menu.clear-field.label')}
         onClick={onReset}
         disabled={readOnly}
         data-testid="file-input-clear"
diff --git a/packages/sanity/src/core/form/inputs/files/common/DropMessage.tsx b/packages/sanity/src/core/form/inputs/files/common/DropMessage.tsx
index 4227e3ca783d..109c39406012 100644
--- a/packages/sanity/src/core/form/inputs/files/common/DropMessage.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/DropMessage.tsx
@@ -3,6 +3,7 @@ import {SchemaType} from '@sanity/types'
 import {Box, Text, Inline} from '@sanity/ui'
 import {AccessDeniedIcon, UploadIcon} from '@sanity/icons'
 import {FileLike, UploaderResolver} from '../../../studio/uploads/types'
+import {useTranslation} from '../../../../i18n'
 
 interface Props {
   hoveringFiles: FileLike[]
@@ -17,6 +18,7 @@ export function DropMessage(props: Props) {
   )
   const rejectedFilesCount = hoveringFiles.length - acceptedFiles.length
   const multiple = types.length > 1
+  const {t} = useTranslation()
   return (
     <>
       {acceptedFiles.length > 0 ? (
@@ -25,14 +27,12 @@ export function DropMessage(props: Props) {
             <Text>
               <UploadIcon />
             </Text>
-            <Text>
-              Drop to upload{' '}
-              {multiple && (
-                <>
-                  {acceptedFiles.length} file{acceptedFiles.length > 1 ? 's' : ''}
-                </>
-              )}
-            </Text>
+            {multiple
+              ? t('inputs.files.common.drop-message.drop-to-upload-multi', {
+                  count: acceptedFiles.length,
+                })
+              : t('inputs.files.common.drop-message.drop-to-upload')}
+            <Text />
           </Inline>
           {rejectedFilesCount > 0 && (
             <Box marginTop={4}>
diff --git a/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx b/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
index 392614500ced..2468e9f85beb 100644
--- a/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/PlaceholderText.tsx
@@ -1,8 +1,9 @@
 import React, {useMemo} from 'react'
-import {BinaryDocumentIcon, AccessDeniedIcon, ImageIcon, ReadOnlyIcon} from '@sanity/icons'
+import {AccessDeniedIcon, BinaryDocumentIcon, ImageIcon, ReadOnlyIcon} from '@sanity/icons'
 import {Flex, Text} from '@sanity/ui'
 import styled from 'styled-components'
 import {FileLike} from '../../../studio/uploads/types'
+import {useTranslation} from '../../../../i18n'
 
 interface Props {
   readOnly?: boolean
@@ -21,6 +22,8 @@ export function PlaceholderText(props: Props) {
   const {hoveringFiles, type, readOnly, acceptedFiles, rejectedFilesCount, directUploads} = props
   const isFileType = type === 'file'
 
+  const {t} = useTranslation()
+
   const messageIcon = useMemo(() => {
     if (readOnly) {
       return <ReadOnlyIcon />
@@ -34,27 +37,27 @@ export function PlaceholderText(props: Props) {
   }, [directUploads, hoveringFiles, isFileType, readOnly, rejectedFilesCount])
 
   const messageText = useMemo(() => {
-    let message = `Drag or paste ${type} here`
-
     if (!directUploads) {
-      return `Can't upload files here`
+      return t('inputs.files.common.placeholder.upload-not-supported')
     }
 
     if (readOnly) {
-      message = 'Read only'
+      return t('inputs.files.common.placeholder.read-only')
     }
 
     if (hoveringFiles && directUploads && !readOnly) {
       if (acceptedFiles.length > 0) {
-        message = `Drop to upload ${type}`
+        return t('inputs.files.common.placeholder.drop-to-upload', {context: type})
       }
       if (rejectedFilesCount > 0) {
-        message = `Can't upload ${rejectedFilesCount} file${rejectedFilesCount > 1 ? 's' : ''} here`
+        return t('inputs.files.common.placeholder.cannot-upload-some-files', {
+          count: rejectedFilesCount,
+        })
       }
     }
 
-    return message
-  }, [acceptedFiles.length, directUploads, hoveringFiles, readOnly, rejectedFilesCount, type])
+    return t('inputs.files.common.placeholder.drag-or-paste-to-upload', {context: type})
+  }, [acceptedFiles.length, directUploads, hoveringFiles, readOnly, rejectedFilesCount, t, type])
 
   return (
     <RootFlex align="center" gap={2} justify="center">
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
index 90b32b0b355d..6eba63b2a019 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadPlaceholder.tsx
@@ -2,6 +2,7 @@ import React, {useState} from 'react'
 import {UploadIcon} from '@sanity/icons'
 import {Flex, useElementSize} from '@sanity/ui'
 import {FileLike} from '../../../studio/uploads/types'
+import {useTranslation} from '../../../../i18n'
 import {FileInputButton} from './FileInputButton/FileInputButton'
 import {PlaceholderText} from './PlaceholderText'
 
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
index a3657a6ff840..132b1eb5e8e0 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
@@ -2,6 +2,8 @@ import React, {useEffect} from 'react'
 import {Flex, Text, Button, Inline, Card} from '@sanity/ui'
 import {UploadState} from '@sanity/types'
 import {LinearProgress} from '../../../../components'
+import {Translate, useTranslation} from '../../../../i18n'
+import {STALE_UPLOAD_MS} from '../constants'
 import {CardWrapper, FlexWrapper, LeftSection, CodeWrapper} from './UploadProgress.styled'
 
 type Props = {
@@ -10,11 +12,6 @@ type Props = {
   onStale?: () => void
   height?: number
 }
-
-// If it's more than this amount of milliseconds since last time upload state was reported,
-// the upload will be marked as stale/interrupted.
-const STALE_UPLOAD_MS = 1000 * 60 * 2 // 2 minutes
-
 const elapsedMs = (date: string): number => new Date().getTime() - new Date(date).getTime()
 
 export function UploadProgress({uploadState, onCancel, onStale, height}: Props) {
@@ -26,6 +23,7 @@ export function UploadProgress({uploadState, onCancel, onStale, height}: Props)
     }
   }, [uploadState.updatedAt, onStale])
 
+  const {t} = useTranslation()
   return (
     <CardWrapper tone="primary" padding={4} border style={{height: `${height}px`}}>
       <FlexWrapper align="center" justify="space-between" height="fill" direction="row" gap={2}>
@@ -33,8 +31,13 @@ export function UploadProgress({uploadState, onCancel, onStale, height}: Props)
           <Flex justify="center" gap={[3, 3, 2, 2]} direction={['column', 'column', 'row']}>
             <Text size={1}>
               <Inline space={2}>
-                Uploading
-                <CodeWrapper size={1}>{filename ? filename : '...'}</CodeWrapper>
+                <Translate
+                  t={t}
+                  i18nKey="input.files.common.upload-progress"
+                  components={{
+                    FileName: () => <CodeWrapper size={1}>{filename ? filename : '…'}</CodeWrapper>,
+                  }}
+                />
               </Inline>
             </Text>
           </Flex>
@@ -47,7 +50,7 @@ export function UploadProgress({uploadState, onCancel, onStale, height}: Props)
         {onCancel ? (
           <Button
             fontSize={2}
-            text="Cancel upload"
+            text={t('input.files.common.cancel-upload')}
             mode="ghost"
             tone="critical"
             onClick={onCancel}
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
index fb542b61f895..a2f551497ac5 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadWarning.tsx
@@ -2,6 +2,8 @@ import {ResetIcon, WarningOutlineIcon} from '@sanity/icons'
 import {Card, Flex, Box, Text, Stack, Button} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
+import {useTranslation} from '../../../../i18n'
+import {STALE_UPLOAD_MS} from '../constants'
 
 type Props = {
   onClearStale?: () => void
@@ -12,6 +14,8 @@ const ButtonWrapper = styled(Button)`
 `
 
 export function UploadWarning({onClearStale}: Props) {
+  const {t} = useTranslation()
+
   return (
     <Card tone="caution" padding={4} border radius={2}>
       <Flex gap={4} marginBottom={4}>
@@ -22,15 +26,21 @@ export function UploadWarning({onClearStale}: Props) {
         </Box>
         <Stack space={3}>
           <Text size={1} weight="semibold">
-            Incomplete upload
+            {t('inputs.files.common.stale-upload-warning.title')}
           </Text>
           <Text size={1}>
-            An upload has made no progress in the last 6m and likely got interrupted. You can safely
-            clear the incomplete upload and try uploading again.
+            {t('inputs.files.common.stale-upload-warning.description', {
+              staleThresholdMinutes: Math.ceil(STALE_UPLOAD_MS / 1000 / 60),
+            })}
           </Text>
         </Stack>
       </Flex>
-      <ButtonWrapper icon={ResetIcon} text="Clear upload" onClick={onClearStale} mode="ghost" />
+      <ButtonWrapper
+        icon={ResetIcon}
+        text={t('inputs.files.common.stale-upload-warning.clear')}
+        onClick={onClearStale}
+        mode="ghost"
+      />
     </Card>
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/files/constants.ts b/packages/sanity/src/core/form/inputs/files/constants.ts
new file mode 100644
index 000000000000..402fc634a05e
--- /dev/null
+++ b/packages/sanity/src/core/form/inputs/files/constants.ts
@@ -0,0 +1,6 @@
+/**
+ * How long, in milliseconds, an upload has to be inactive for in order to consider it stale.
+ * E.g. if it's more than this amount of milliseconds since last time upload state was reported,
+ * the upload will be marked as stale/interrupted.
+ */
+export const STALE_UPLOAD_MS = 1000 * 60 * 2
diff --git a/packages/sanity/src/core/form/studio/inputs/StudioImageInput.tsx b/packages/sanity/src/core/form/studio/inputs/StudioImageInput.tsx
index 32a8f3a81900..3d8fb116a461 100644
--- a/packages/sanity/src/core/form/studio/inputs/StudioImageInput.tsx
+++ b/packages/sanity/src/core/form/studio/inputs/StudioImageInput.tsx
@@ -8,6 +8,7 @@ import {resolveUploader as defaultResolveUploader} from '../uploads/resolveUploa
 import {FileLike} from '../uploads/types'
 import {useDocumentPreviewStore} from '../../../store'
 import {useClient} from '../../../hooks'
+import {useTranslation} from '../../../i18n'
 import {observeImageAsset} from './client-adapters/assets'
 
 /**
@@ -58,9 +59,11 @@ export function StudioImageInput(props: ImageInputProps) {
     [documentPreviewStore],
   )
 
+  const {t} = useTranslation()
   return (
     <BaseImageInput
       {...props}
+      t={t}
       client={client}
       assetSources={assetSources}
       directUploads={image.directUploads}
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index c67cd45def91..0d54b27cc410 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -209,6 +209,111 @@ export const studioLocaleStrings = {
   'inputs.datetime.calendar.weekday-names.short.saturday': 'Sat',
   'inputs.datetime.calendar.weekday-names.short.sunday': 'Sun',
 
+  /** --- File (Image, File and ImageTool) Inputs --- */
+
+  /** Open image edit dialog */
+  'inputs.files.image.actions-menu.edit-details.label': 'Open image edit dialog',
+
+  /** Open image options menu */
+  'inputs.files.image.actions-menu.options.label': 'Open image options menu',
+
+  /** The upload could not be completed at this time. */
+  'inputs.files.image.upload-error.description': 'The upload could not be completed at this time.',
+
+  /** Upload failed */
+  'inputs.files.image.upload-error.title': 'Upload failed',
+
+  /** Edit hotspot and crop */
+  'inputs.files.image.hotspot-dialog.title': 'Edit hotspot and crop',
+
+  /** Preview of uploaded image */
+  'inputs.files.image.preview-uploaded-image': 'Preview of uploaded image',
+
+  /** Cannot upload this file here */
+  'inputs.files.image.drag-overlay.cannot-upload-here': 'Cannot upload this file here',
+
+  /** This field is read only */
+  'inputs.files.image.drag-overlay.this-field-is-read-only': 'This field is read only',
+
+  /** Drop image to upload */
+  'inputs.files.image.drag-overlay.drop-to-upload-image': 'Drop image to upload',
+
+  /** Invalid image value */
+  'inputs.files.image.invalid-image-warning.title': 'Invalid image value',
+
+  /** The value of this field is not a valid image. Resetting this field will let you choose a new image. */
+  'inputs.files.image.invalid-image-warning.description':
+    'The value of this field is not a valid image. Resetting this field will let you choose a new image.',
+
+  /** The URL is copied to the clipboard */
+  'inputs.files.common.actions-menu.notification.url-copied': 'The URL is copied to the clipboard',
+
+  /** Replace */
+  'inputs.files.common.actions-menu.replace.label': 'Replace',
+
+  /** Upload */
+  'inputs.files.common.actions-menu.upload.label': 'Upload',
+
+  /** Download */
+  'inputs.files.common.actions-menu.download.label': 'Download',
+
+  /** Copy URL */
+  'inputs.files.common.actions-menu.copy-url.label': 'Copy URL',
+
+  /** Clear field */
+  'inputs.files.common.actions-menu.clear-field.label': 'Clear field',
+
+  /** Can't upload files here */
+  'inputs.files.common.placeholder.upload-not-supported': "Can't upload files here",
+
+  /** Read only */
+  'inputs.files.common.placeholder.read-only': 'Read only',
+
+  /** Drop to upload image */
+  'inputs.files.common.placeholder.drop-to-upload_image': 'Drop to upload image',
+
+  /** Drop to upload file */
+  'inputs.files.common.placeholder.drop-to-upload_file': 'Drop to upload file',
+
+  /** Cannot upload `{{count}}` files */
+  'inputs.files.common.placeholder.cannot-upload-some-files_one': 'Cannot upload file',
+  'inputs.files.common.placeholder.cannot-upload-some-files_other': 'Cannot upload {{count}} files',
+
+  /** Drag or paste type here */
+  'inputs.files.common.placeholder.drag-or-paste-to-upload_file': 'Drag or paste file here',
+
+  /** Drag or paste image here */
+  'inputs.files.common.placeholder.drag-or-paste-to-upload_image': 'Drag or paste image here',
+
+  /** Drop to upload */
+  'inputs.files.common.drop-message.drop-to-upload': 'Drop to upload',
+
+  /** Drop to upload `{{count}}` file */
+  'inputs.files.common.drop-message.drop-to-upload-multi_one': 'Drop to upload {{count}} file',
+
+  /** Drop to upload `{{count}}` files */
+  'inputs.files.common.drop-message.drop-to-upload-multi_other': 'Drop to upload {{count}} files',
+
+  /** Uploading <FileName/> */
+  'input.files.common.upload-progress': 'Uploading <FileName/>',
+
+  /** Incomplete upload */
+  'inputs.files.common.stale-upload-warning.title': 'Incomplete upload',
+
+  /** An upload has made no progress for at least `{{staleThresholdMinutes}}` minutes and likely got interrupted. You can safely clear the incomplete upload and try uploading again. */
+  'inputs.files.common.stale-upload-warning.description':
+    'An upload has made no progress for at least {{staleThresholdMinutes}} minutes and likely got interrupted. You can safely clear the incomplete upload and try uploading again.',
+
+  /** Clear upload */
+  'inputs.files.common.stale-upload-warning.clear': 'Clear upload',
+
+  /** Hotspot & Crop */
+  'inputs.files.imagetool.field.title': 'Hotspot & Crop',
+
+  /** Adjust the rectangle to crop image. Adjust the circle to specify the area that should always be visible. */
+  'inputs.files.imagetool.field.description':
+    'Adjust the rectangle to crop image. Adjust the circle to specify the area that should always be visible.',
+
   /** Label for selecting a hour preset. Receives a `time` param as a string on hh:mm format and a `date` param as a Date instance denoting the preset date */
   'inputs.datetime.calendar.action.set-to-time-preset': '{{time}} on {{date, datetime}}',
 
diff --git a/packages/sanity/test/form/renderImageInput.tsx b/packages/sanity/test/form/renderImageInput.tsx
index a61c302cad0f..61288837bb5c 100644
--- a/packages/sanity/test/form/renderImageInput.tsx
+++ b/packages/sanity/test/form/renderImageInput.tsx
@@ -35,6 +35,7 @@ export async function renderImageInput(options: {
       ...restProps,
       assetSources,
       client,
+      t: (key: string, values?: Record<string, string>) => key,
       imageUrlBuilder,
       observeAsset,
       resolveUploader,