@strapi/upload 5.58.0 → 5.60.0

package/dist/admin/components/MediaLibraryInput/AssetDropZone.mjs

@@ -0,0 +1,154 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+import { Flex, Typography } from '@strapi/design-system';
+import { Images } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { getTranslationKey } from '../../utils/translations.mjs';
+
+const DRAG_FRAME_COLORS = {
+    accept: {
+        border: 'primary600',
+        background: 'primary100'
+    },
+    reject: {
+        border: 'neutral300',
+        background: 'neutral150'
+    }
+};
+const Zone = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: ${({ theme })=>theme.spaces[4]};
+  width: 100%;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  text-align: ${({ $variant })=>$variant === 'bar' ? 'start' : 'center'};
+
+  ${({ $variant, theme })=>$variant !== 'bar' ? `
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    min-height: ${$variant === 'tile' ? '20.8rem' : 'auto'};
+    padding: ${theme.spaces[4]};
+    border: 1px dashed ${theme.colors.neutral300};
+    background: ${theme.colors.neutral0};
+  ` : `
+    min-height: 7.2rem;
+    padding: ${theme.spaces[4]};
+    border: 1px solid ${theme.colors.neutral200};
+    background: ${theme.colors.neutral100};
+  `}
+
+  // Only while a file is dragged over the zone: a solid frame inset from the
+  // zone's own border marks where the file will land, greyed out when it can't.
+  ${({ $dragState, theme })=>$dragState !== 'idle' && `
+    &::after {
+      content: '';
+      position: absolute;
+      inset: ${theme.spaces[2]};
+      border: 1px solid ${theme.colors[DRAG_FRAME_COLORS[$dragState].border]};
+      border-radius: ${theme.borderRadius};
+      background: ${theme.colors[DRAG_FRAME_COLORS[$dragState].background]};
+      pointer-events: none;
+    }
+
+    & > * {
+      z-index: 1;
+    }
+  `}
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+const IconFrame = styled(Flex)`
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral200};
+  color: ${({ theme })=>theme.colors.neutral500};
+`;
+/**
+ * The field's own drop target. It only takes drops: browsing and picking files
+ * go through the "Add asset" menu, so the field has one way in, not two.
+ *
+ * Deliberately not the Media Library page's
+ * `UploadDropZoneProvider`: that one covers a whole route and paints a
+ * full-surface overlay, where this has to stay inside one field on a form that
+ * may hold several of them.
+ */ const AssetDropZone = ({ variant = 'bar', disabled = false, onDropFiles })=>{
+    const { formatMessage } = useIntl();
+    const [isDragging, setIsDragging] = useState(false);
+    // Drag events fire on descendants too, so a plain boolean flickers as the
+    // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.
+    const dragDepth = useRef(0);
+    const handleDragEnter = useCallback((event)=>{
+        event.preventDefault();
+        if (!event.dataTransfer.types.includes('Files')) {
+            return;
+        }
+        dragDepth.current += 1;
+        setIsDragging(true);
+    }, []);
+    const handleDragLeave = useCallback((event)=>{
+        event.preventDefault();
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setIsDragging(false);
+        }
+    }, []);
+    const handleDragOver = useCallback((event)=>{
+        event.preventDefault();
+        // `none` shows the no-drop cursor, and the browser then fires no `drop`.
+        event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';
+    }, [
+        disabled
+    ]);
+    const handleDrop = useCallback((event)=>{
+        event.preventDefault();
+        dragDepth.current = 0;
+        setIsDragging(false);
+        if (disabled) {
+            return;
+        }
+        const files = Array.from(event.dataTransfer.files ?? []);
+        if (files.length > 0) {
+            onDropFiles(files);
+        }
+    }, [
+        disabled,
+        onDropFiles
+    ]);
+    return /*#__PURE__*/ jsxs(Zone, {
+        $dragState: isDragging ? disabled ? 'reject' : 'accept' : 'idle',
+        $variant: variant,
+        "data-disabled": disabled,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+            /*#__PURE__*/ jsx(IconFrame, {
+                justifyContent: "center",
+                alignItems: "center",
+                children: /*#__PURE__*/ jsx(Images, {
+                    width: "2.4rem",
+                    height: "2.4rem"
+                })
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                textColor: "neutral600",
+                children: formatMessage({
+                    id: getTranslationKey('content-manager.input.placeholder'),
+                    defaultMessage: 'Drag & drop an asset here'
+                })
+            })
+        ]
+    });
+};
+
+export { AssetDropZone };
+//# sourceMappingURL=AssetDropZone.mjs.map

package/dist/admin/components/MediaLibraryInput/AssetDropZone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetDropZone.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetDropZone.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type DragEvent } from 'react';\n\nimport { Flex, Typography } from '@strapi/design-system';\nimport { Images } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\n/**\n * `bar` on an empty field, `tile` after a multiple field's cards, `stacked`\n * below them when the field is too narrow for both on one row.\n */\nexport type ZoneVariant = 'bar' | 'tile' | 'stacked';\n\ntype DragState = 'idle' | 'accept' | 'reject';\n\nconst DRAG_FRAME_COLORS = {\n  accept: { border: 'primary600', background: 'primary100' },\n  reject: { border: 'neutral300', background: 'neutral150' },\n} as const;\n\nconst Zone = styled.div<{ $dragState: DragState; $variant: ZoneVariant }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.spaces[4]};\n  width: 100%;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  text-align: ${({ $variant }) => ($variant === 'bar' ? 'start' : 'center')};\n\n  ${({ $variant, theme }) =>\n    $variant !== 'bar'\n      ? `\n    flex-direction: column;\n    justify-content: center;\n    height: 100%;\n    min-height: ${$variant === 'tile' ? '20.8rem' : 'auto'};\n    padding: ${theme.spaces[4]};\n    border: 1px dashed ${theme.colors.neutral300};\n    background: ${theme.colors.neutral0};\n  `\n      : `\n    min-height: 7.2rem;\n    padding: ${theme.spaces[4]};\n    border: 1px solid ${theme.colors.neutral200};\n    background: ${theme.colors.neutral100};\n  `}\n\n  // Only while a file is dragged over the zone: a solid frame inset from the\n  // zone's own border marks where the file will land, greyed out when it can't.\n  ${({ $dragState, theme }) =>\n    $dragState !== 'idle' &&\n    `\n    &::after {\n      content: '';\n      position: absolute;\n      inset: ${theme.spaces[2]};\n      border: 1px solid ${theme.colors[DRAG_FRAME_COLORS[$dragState].border]};\n      border-radius: ${theme.borderRadius};\n      background: ${theme.colors[DRAG_FRAME_COLORS[$dragState].background]};\n      pointer-events: none;\n    }\n\n    & > * {\n      z-index: 1;\n    }\n  `}\n\n  &[data-disabled='true'] {\n    cursor: not-allowed;\n  }\n`;\n\nconst IconFrame = styled(Flex)`\n  flex-shrink: 0;\n  width: 4rem;\n  height: 4rem;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) => theme.colors.neutral200};\n  color: ${({ theme }) => theme.colors.neutral500};\n`;\n\ninterface AssetDropZoneProps {\n  variant?: ZoneVariant;\n  disabled?: boolean;\n  onDropFiles: (files: globalThis.File[]) => void;\n}\n\n/**\n * The field's own drop target. It only takes drops: browsing and picking files\n * go through the \"Add asset\" menu, so the field has one way in, not two.\n *\n * Deliberately not the Media Library page's\n * `UploadDropZoneProvider`: that one covers a whole route and paints a\n * full-surface overlay, where this has to stay inside one field on a form that\n * may hold several of them.\n */\nexport const AssetDropZone = ({\n  variant = 'bar',\n  disabled = false,\n  onDropFiles,\n}: AssetDropZoneProps) => {\n  const { formatMessage } = useIntl();\n  const [isDragging, setIsDragging] = useState(false);\n  // Drag events fire on descendants too, so a plain boolean flickers as the\n  // pointer crosses the icon or the label. Counting enter/leave pairs doesn't.\n  const dragDepth = useRef(0);\n\n  const handleDragEnter = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (!event.dataTransfer.types.includes('Files')) {\n      return;\n    }\n    dragDepth.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((event: DragEvent<HTMLElement>) => {\n    event.preventDefault();\n    dragDepth.current -= 1;\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0;\n      setIsDragging(false);\n    }\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      // `none` shows the no-drop cursor, and the browser then fires no `drop`.\n      event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';\n    },\n    [disabled]\n  );\n\n  const handleDrop = useCallback(\n    (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      dragDepth.current = 0;\n      setIsDragging(false);\n\n      if (disabled) {\n        return;\n      }\n\n      const files = Array.from(event.dataTransfer.files ?? []);\n      if (files.length > 0) {\n        onDropFiles(files);\n      }\n    },\n    [disabled, onDropFiles]\n  );\n\n  return (\n    <Zone\n      $dragState={isDragging ? (disabled ? 'reject' : 'accept') : 'idle'}\n      $variant={variant}\n      data-disabled={disabled}\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      <IconFrame justifyContent=\"center\" alignItems=\"center\">\n        <Images width=\"2.4rem\" height=\"2.4rem\" />\n      </IconFrame>\n      <Typography textColor=\"neutral600\">\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.placeholder'),\n          defaultMessage: 'Drag & drop an asset here',\n        })}\n      </Typography>\n    </Zone>\n  );\n};\n"],"names":["DRAG_FRAME_COLORS","accept","border","background","reject","Zone","styled","div","theme","spaces","borderRadius","$variant","colors","neutral300","neutral0","neutral200","neutral100","$dragState","IconFrame","Flex","neutral500","AssetDropZone","variant","disabled","onDropFiles","formatMessage","useIntl","isDragging","setIsDragging","useState","dragDepth","useRef","handleDragEnter","useCallback","event","preventDefault","dataTransfer","types","includes","current","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","Array","from","length","_jsxs","data-disabled","onDragEnter","onDragLeave","onDragOver","onDrop","_jsx","justifyContent","alignItems","Images","width","height","Typography","textColor","id","getTranslationKey","defaultMessage"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AssetPreview.js

@@ -0,0 +1,109 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+var enums = require('../../enums.js');
+var files = require('../../utils/files.js');
+var getAssetIcon = require('../../utils/getAssetIcon.js');
+
+const Frame = styledComponents.styled(designSystem.Flex)`
+  flex-shrink: 0;
+  overflow: hidden;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral150};
+
+  ${({ $size, theme })=>$size === 'S' ? `
+    width: 4rem;
+    height: 4rem;
+    border-radius: ${theme.borderRadius};
+  ` : `
+    width: 100%;
+    height: 16rem;
+  `}
+`;
+const PreviewImage = styledComponents.styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const PreviewFrame = ({ size, src, alt = '', crossOrigin, mime, ext })=>{
+    if (src) {
+        return /*#__PURE__*/ jsxRuntime.jsx(Frame, {
+            $size: size,
+            children: /*#__PURE__*/ jsxRuntime.jsx(PreviewImage, {
+                src: src,
+                alt: alt,
+                crossOrigin: crossOrigin,
+                draggable: false
+            })
+        });
+    }
+    const Icon = getAssetIcon.getAssetIcon(mime, ext);
+    const iconSize = size === 'S' ? 20 : 32;
+    return /*#__PURE__*/ jsxRuntime.jsx(Frame, {
+        $size: size,
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+            width: iconSize,
+            height: iconSize
+        })
+    });
+};
+const AssetPreview = ({ asset, size })=>{
+    const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;
+    if (!mime?.includes(enums.ASSET_TYPES.Image)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(PreviewFrame, {
+            size: size,
+            mime: mime,
+            ext: ext
+        });
+    }
+    // Same two rules the grid preview applies: a `updatedAt` cache-buster so a
+    // replaced asset stops serving its old thumbnail, skipped on signed URLs
+    // because an extra param invalidates the signature (#26581).
+    // Cards are wider than a thumbnail, so they take the `small` format when there is one.
+    const sizedFormats = formats;
+    const preferredUrl = size === 'S' ? formats?.thumbnail?.url : sizedFormats?.small?.url ?? url;
+    const rawUrl = files.prefixFileUrlWithBackendUrl(preferredUrl) ?? files.prefixFileUrlWithBackendUrl(url);
+    const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;
+    const src = rawUrl && cacheKey !== undefined ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}` : rawUrl;
+    return /*#__PURE__*/ jsxRuntime.jsx(PreviewFrame, {
+        size: size,
+        src: src,
+        alt: alternativeText || '',
+        crossOrigin: !isLocal && isUrlSigned ? 'anonymous' : undefined,
+        mime: mime,
+        ext: ext
+    });
+};
+/**
+ * Previews a file that has not reached the server yet, straight from the
+ * user's disk.
+ */ const UploadPreview = ({ file, size })=>{
+    const isImage = file?.type.startsWith(enums.ASSET_TYPES.Image) ?? false;
+    const [src, setSrc] = React.useState();
+    React.useEffect(()=>{
+        if (!file || !isImage) {
+            setSrc(undefined);
+            return undefined;
+        }
+        const objectUrl = URL.createObjectURL(file);
+        setSrc(objectUrl);
+        return ()=>URL.revokeObjectURL(objectUrl);
+    }, [
+        file,
+        isImage
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(PreviewFrame, {
+        size: size,
+        src: src,
+        mime: file?.type
+    });
+};
+
+exports.AssetPreview = AssetPreview;
+exports.UploadPreview = UploadPreview;
+//# sourceMappingURL=AssetPreview.js.map

package/dist/admin/components/MediaLibraryInput/AssetPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreview.js","sources":["../../../../admin/src/components/MediaLibraryInput/AssetPreview.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../utils/files';\nimport { getAssetIcon } from '../../utils/getAssetIcon';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype PreviewSize = 'S' | 'L';\n\nconst Frame = styled(Flex)<{ $size: PreviewSize }>`\n  flex-shrink: 0;\n  overflow: hidden;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n\n  ${({ $size, theme }) =>\n    $size === 'S'\n      ? `\n    width: 4rem;\n    height: 4rem;\n    border-radius: ${theme.borderRadius};\n  `\n      : `\n    width: 100%;\n    height: 16rem;\n  `}\n`;\n\nconst PreviewImage = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\ninterface PreviewFrameProps {\n  size: PreviewSize;\n  src?: string;\n  alt?: string;\n  crossOrigin?: 'anonymous';\n  mime?: string;\n  ext?: string;\n}\n\nconst PreviewFrame = ({ size, src, alt = '', crossOrigin, mime, ext }: PreviewFrameProps) => {\n  if (src) {\n    return (\n      <Frame $size={size}>\n        <PreviewImage src={src} alt={alt} crossOrigin={crossOrigin} draggable={false} />\n      </Frame>\n    );\n  }\n\n  const Icon = getAssetIcon(mime, ext);\n  const iconSize = size === 'S' ? 20 : 32;\n\n  return (\n    <Frame $size={size} justifyContent=\"center\" alignItems=\"center\">\n      <Icon width={iconSize} height={iconSize} />\n    </Frame>\n  );\n};\n\ninterface AssetPreviewProps {\n  asset: File;\n  size: PreviewSize;\n}\n\nexport const AssetPreview = ({ asset, size }: AssetPreviewProps) => {\n  const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;\n\n  if (!mime?.includes(ASSET_TYPES.Image)) {\n    return <PreviewFrame size={size} mime={mime} ext={ext} />;\n  }\n\n  // Same two rules the grid preview applies: a `updatedAt` cache-buster so a\n  // replaced asset stops serving its old thumbnail, skipped on signed URLs\n  // because an extra param invalidates the signature (#26581).\n  // Cards are wider than a thumbnail, so they take the `small` format when there is one.\n  const sizedFormats = formats as Record<string, { url?: string } | undefined> | undefined;\n  const preferredUrl = size === 'S' ? formats?.thumbnail?.url : (sizedFormats?.small?.url ?? url);\n  const rawUrl = prefixFileUrlWithBackendUrl(preferredUrl) ?? prefixFileUrlWithBackendUrl(url);\n  const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;\n  const src =\n    rawUrl && cacheKey !== undefined\n      ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}`\n      : rawUrl;\n\n  return (\n    <PreviewFrame\n      size={size}\n      src={src}\n      alt={alternativeText || ''}\n      crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n      mime={mime}\n      ext={ext}\n    />\n  );\n};\n\ninterface UploadPreviewProps {\n  file?: globalThis.File;\n  size: PreviewSize;\n}\n\n/**\n * Previews a file that has not reached the server yet, straight from the\n * user's disk.\n */\nexport const UploadPreview = ({ file, size }: UploadPreviewProps) => {\n  const isImage = file?.type.startsWith(ASSET_TYPES.Image) ?? false;\n  const [src, setSrc] = useState<string>();\n\n  useEffect(() => {\n    if (!file || !isImage) {\n      setSrc(undefined);\n      return undefined;\n    }\n\n    const objectUrl = URL.createObjectURL(file);\n    setSrc(objectUrl);\n\n    return () => URL.revokeObjectURL(objectUrl);\n  }, [file, isImage]);\n\n  return <PreviewFrame size={size} src={src} mime={file?.type} />;\n};\n"],"names":["Frame","styled","Flex","theme","colors","neutral500","neutral150","$size","borderRadius","PreviewImage","img","PreviewFrame","size","src","alt","crossOrigin","mime","ext","_jsx","draggable","Icon","getAssetIcon","iconSize","justifyContent","alignItems","width","height","AssetPreview","asset","alternativeText","formats","url","updatedAt","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","sizedFormats","preferredUrl","thumbnail","small","rawUrl","prefixFileUrlWithBackendUrl","cacheKey","Date","getTime","undefined","UploadPreview","file","isImage","type","startsWith","setSrc","useState","useEffect","objectUrl","URL","createObjectURL","revokeObjectURL"],"mappings":";;;;;;;;;;AAaA,MAAMA,KAAAA,GAAQC,uBAAAA,CAAOC,iBAAAA,CAA6B;;;SAGzC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACC,UAAU,CAAC;cACpC,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAACE,UAAU,CAAC;;EAErD,EAAE,CAAC,EAAEC,KAAK,EAAEJ,KAAK,EAAE,GACjBI,KAAAA,KAAU,GAAA,GACN;;;mBAGW,EAAEJ,KAAAA,CAAMK,YAAY,CAAC;AACtC,EAAA,CAAC,GACK;;;AAGN,EAAA,CAAC;AACH,CAAC;AAED,MAAMC,YAAAA,GAAeR,uBAAAA,CAAOS,GAAG;;;;AAI/B,CAAC;AAWD,MAAMC,YAAAA,GAAe,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAEC,GAAAA,GAAM,EAAE,EAAEC,WAAW,EAAEC,IAAI,EAAEC,GAAG,EAAqB,GAAA;AACtF,IAAA,IAAIJ,GAAAA,EAAK;AACP,QAAA,qBACEK,cAAA,CAAClB,KAAAA,EAAAA;YAAMO,KAAAA,EAAOK,IAAAA;AACZ,YAAA,QAAA,gBAAAM,cAAA,CAACT,YAAAA,EAAAA;gBAAaI,GAAAA,EAAKA,GAAAA;gBAAKC,GAAAA,EAAKA,GAAAA;gBAAKC,WAAAA,EAAaA,WAAAA;gBAAaI,SAAAA,EAAW;;;AAG7E,IAAA;IAEA,MAAMC,IAAAA,GAAOC,0BAAaL,IAAAA,EAAMC,GAAAA,CAAAA;IAChC,MAAMK,QAAAA,GAAWV,IAAAA,KAAS,GAAA,GAAM,EAAA,GAAK,EAAA;AAErC,IAAA,qBACEM,cAAA,CAAClB,KAAAA,EAAAA;QAAMO,KAAAA,EAAOK,IAAAA;QAAMW,cAAAA,EAAe,QAAA;QAASC,UAAAA,EAAW,QAAA;AACrD,QAAA,QAAA,gBAAAN,cAAA,CAACE,IAAAA,EAAAA;YAAKK,KAAAA,EAAOH,QAAAA;YAAUI,MAAAA,EAAQJ;;;AAGrC,CAAA;MAOaK,YAAAA,GAAe,CAAC,EAAEC,KAAK,EAAEhB,IAAI,EAAqB,GAAA;AAC7D,IAAA,MAAM,EAAEiB,eAAe,EAAEZ,GAAG,EAAEa,OAAO,EAAEd,IAAI,EAAEe,GAAG,EAAEC,SAAS,EAAEC,OAAO,EAAEC,WAAW,EAAE,GAAGN,KAAAA;AAEtF,IAAA,IAAI,CAACZ,IAAAA,EAAMmB,QAAAA,CAASC,iBAAAA,CAAYC,KAAK,CAAA,EAAG;AACtC,QAAA,qBAAOnB,cAAA,CAACP,YAAAA,EAAAA;YAAaC,IAAAA,EAAMA,IAAAA;YAAMI,IAAAA,EAAMA,IAAAA;YAAMC,GAAAA,EAAKA;;AACpD,IAAA;;;;;AAMA,IAAA,MAAMqB,YAAAA,GAAeR,OAAAA;IACrB,MAAMS,YAAAA,GAAe3B,SAAS,GAAA,GAAMkB,OAAAA,EAASU,WAAWT,GAAAA,GAAOO,YAAAA,EAAcG,OAAOV,GAAAA,IAAOA,GAAAA;IAC3F,MAAMW,MAAAA,GAASC,iCAAAA,CAA4BJ,YAAAA,CAAAA,IAAiBI,iCAAAA,CAA4BZ,GAAAA,CAAAA;IACxF,MAAMa,QAAAA,GAAWZ,aAAa,CAACE,WAAAA,GAAc,IAAIW,IAAAA,CAAKb,SAAAA,CAAAA,CAAWc,OAAO,EAAA,GAAKC,SAAAA;AAC7E,IAAA,MAAMlC,GAAAA,GACJ6B,MAAAA,IAAUE,QAAAA,KAAaG,SAAAA,GACnB,GAAGL,MAAAA,CAAAA,EAASA,MAAAA,CAAOP,QAAQ,CAAC,OAAO,GAAA,GAAM,GAAA,CAAI,EAAE,EAAES,UAAU,GAC3DF,MAAAA;AAEN,IAAA,qBACExB,cAAA,CAACP,YAAAA,EAAAA;QACCC,IAAAA,EAAMA,IAAAA;QACNC,GAAAA,EAAKA,GAAAA;AACLC,QAAAA,GAAAA,EAAKe,eAAAA,IAAmB,EAAA;QACxBd,WAAAA,EAAa,CAACkB,OAAAA,IAAWC,WAAAA,GAAc,WAAA,GAAca,SAAAA;QACrD/B,IAAAA,EAAMA,IAAAA;QACNC,GAAAA,EAAKA;;AAGX;AAOA;;;UAIa+B,aAAAA,GAAgB,CAAC,EAAEC,IAAI,EAAErC,IAAI,EAAsB,GAAA;AAC9D,IAAA,MAAMsC,UAAUD,IAAAA,EAAME,IAAAA,CAAKC,UAAAA,CAAWhB,iBAAAA,CAAYC,KAAK,CAAA,IAAK,KAAA;IAC5D,MAAM,CAACxB,GAAAA,EAAKwC,MAAAA,CAAO,GAAGC,cAAAA,EAAAA;IAEtBC,eAAAA,CAAU,IAAA;QACR,IAAI,CAACN,IAAAA,IAAQ,CAACC,OAAAA,EAAS;YACrBG,MAAAA,CAAON,SAAAA,CAAAA;YACP,OAAOA,SAAAA;AACT,QAAA;QAEA,MAAMS,SAAAA,GAAYC,GAAAA,CAAIC,eAAe,CAACT,IAAAA,CAAAA;QACtCI,MAAAA,CAAOG,SAAAA,CAAAA;QAEP,OAAO,IAAMC,GAAAA,CAAIE,eAAe,CAACH,SAAAA,CAAAA;IACnC,CAAA,EAAG;AAACP,QAAAA,IAAAA;AAAMC,QAAAA;AAAQ,KAAA,CAAA;AAElB,IAAA,qBAAOhC,cAAA,CAACP,YAAAA,EAAAA;QAAaC,IAAAA,EAAMA,IAAAA;QAAMC,GAAAA,EAAKA,GAAAA;AAAKG,QAAAA,IAAAA,EAAMiC,IAAAA,EAAME;;AACzD;;;;;"}

package/dist/admin/components/MediaLibraryInput/AssetPreview.mjs

@@ -0,0 +1,106 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { Flex } from '@strapi/design-system';
+import { styled } from 'styled-components';
+import { ASSET_TYPES } from '../../enums.mjs';
+import { prefixFileUrlWithBackendUrl } from '../../utils/files.mjs';
+import { getAssetIcon } from '../../utils/getAssetIcon.mjs';
+
+const Frame = styled(Flex)`
+  flex-shrink: 0;
+  overflow: hidden;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral150};
+
+  ${({ $size, theme })=>$size === 'S' ? `
+    width: 4rem;
+    height: 4rem;
+    border-radius: ${theme.borderRadius};
+  ` : `
+    width: 100%;
+    height: 16rem;
+  `}
+`;
+const PreviewImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+const PreviewFrame = ({ size, src, alt = '', crossOrigin, mime, ext })=>{
+    if (src) {
+        return /*#__PURE__*/ jsx(Frame, {
+            $size: size,
+            children: /*#__PURE__*/ jsx(PreviewImage, {
+                src: src,
+                alt: alt,
+                crossOrigin: crossOrigin,
+                draggable: false
+            })
+        });
+    }
+    const Icon = getAssetIcon(mime, ext);
+    const iconSize = size === 'S' ? 20 : 32;
+    return /*#__PURE__*/ jsx(Frame, {
+        $size: size,
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsx(Icon, {
+            width: iconSize,
+            height: iconSize
+        })
+    });
+};
+const AssetPreview = ({ asset, size })=>{
+    const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;
+    if (!mime?.includes(ASSET_TYPES.Image)) {
+        return /*#__PURE__*/ jsx(PreviewFrame, {
+            size: size,
+            mime: mime,
+            ext: ext
+        });
+    }
+    // Same two rules the grid preview applies: a `updatedAt` cache-buster so a
+    // replaced asset stops serving its old thumbnail, skipped on signed URLs
+    // because an extra param invalidates the signature (#26581).
+    // Cards are wider than a thumbnail, so they take the `small` format when there is one.
+    const sizedFormats = formats;
+    const preferredUrl = size === 'S' ? formats?.thumbnail?.url : sizedFormats?.small?.url ?? url;
+    const rawUrl = prefixFileUrlWithBackendUrl(preferredUrl) ?? prefixFileUrlWithBackendUrl(url);
+    const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;
+    const src = rawUrl && cacheKey !== undefined ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}` : rawUrl;
+    return /*#__PURE__*/ jsx(PreviewFrame, {
+        size: size,
+        src: src,
+        alt: alternativeText || '',
+        crossOrigin: !isLocal && isUrlSigned ? 'anonymous' : undefined,
+        mime: mime,
+        ext: ext
+    });
+};
+/**
+ * Previews a file that has not reached the server yet, straight from the
+ * user's disk.
+ */ const UploadPreview = ({ file, size })=>{
+    const isImage = file?.type.startsWith(ASSET_TYPES.Image) ?? false;
+    const [src, setSrc] = useState();
+    useEffect(()=>{
+        if (!file || !isImage) {
+            setSrc(undefined);
+            return undefined;
+        }
+        const objectUrl = URL.createObjectURL(file);
+        setSrc(objectUrl);
+        return ()=>URL.revokeObjectURL(objectUrl);
+    }, [
+        file,
+        isImage
+    ]);
+    return /*#__PURE__*/ jsx(PreviewFrame, {
+        size: size,
+        src: src,
+        mime: file?.type
+    });
+};
+
+export { AssetPreview, UploadPreview };
+//# sourceMappingURL=AssetPreview.mjs.map

package/dist/admin/components/MediaLibraryInput/AssetPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPreview.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetPreview.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { ASSET_TYPES } from '../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../utils/files';\nimport { getAssetIcon } from '../../utils/getAssetIcon';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype PreviewSize = 'S' | 'L';\n\nconst Frame = styled(Flex)<{ $size: PreviewSize }>`\n  flex-shrink: 0;\n  overflow: hidden;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n\n  ${({ $size, theme }) =>\n    $size === 'S'\n      ? `\n    width: 4rem;\n    height: 4rem;\n    border-radius: ${theme.borderRadius};\n  `\n      : `\n    width: 100%;\n    height: 16rem;\n  `}\n`;\n\nconst PreviewImage = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\ninterface PreviewFrameProps {\n  size: PreviewSize;\n  src?: string;\n  alt?: string;\n  crossOrigin?: 'anonymous';\n  mime?: string;\n  ext?: string;\n}\n\nconst PreviewFrame = ({ size, src, alt = '', crossOrigin, mime, ext }: PreviewFrameProps) => {\n  if (src) {\n    return (\n      <Frame $size={size}>\n        <PreviewImage src={src} alt={alt} crossOrigin={crossOrigin} draggable={false} />\n      </Frame>\n    );\n  }\n\n  const Icon = getAssetIcon(mime, ext);\n  const iconSize = size === 'S' ? 20 : 32;\n\n  return (\n    <Frame $size={size} justifyContent=\"center\" alignItems=\"center\">\n      <Icon width={iconSize} height={iconSize} />\n    </Frame>\n  );\n};\n\ninterface AssetPreviewProps {\n  asset: File;\n  size: PreviewSize;\n}\n\nexport const AssetPreview = ({ asset, size }: AssetPreviewProps) => {\n  const { alternativeText, ext, formats, mime, url, updatedAt, isLocal, isUrlSigned } = asset;\n\n  if (!mime?.includes(ASSET_TYPES.Image)) {\n    return <PreviewFrame size={size} mime={mime} ext={ext} />;\n  }\n\n  // Same two rules the grid preview applies: a `updatedAt` cache-buster so a\n  // replaced asset stops serving its old thumbnail, skipped on signed URLs\n  // because an extra param invalidates the signature (#26581).\n  // Cards are wider than a thumbnail, so they take the `small` format when there is one.\n  const sizedFormats = formats as Record<string, { url?: string } | undefined> | undefined;\n  const preferredUrl = size === 'S' ? formats?.thumbnail?.url : (sizedFormats?.small?.url ?? url);\n  const rawUrl = prefixFileUrlWithBackendUrl(preferredUrl) ?? prefixFileUrlWithBackendUrl(url);\n  const cacheKey = updatedAt && !isUrlSigned ? new Date(updatedAt).getTime() : undefined;\n  const src =\n    rawUrl && cacheKey !== undefined\n      ? `${rawUrl}${rawUrl.includes('?') ? '&' : '?'}v=${cacheKey}`\n      : rawUrl;\n\n  return (\n    <PreviewFrame\n      size={size}\n      src={src}\n      alt={alternativeText || ''}\n      crossOrigin={!isLocal && isUrlSigned ? 'anonymous' : undefined}\n      mime={mime}\n      ext={ext}\n    />\n  );\n};\n\ninterface UploadPreviewProps {\n  file?: globalThis.File;\n  size: PreviewSize;\n}\n\n/**\n * Previews a file that has not reached the server yet, straight from the\n * user's disk.\n */\nexport const UploadPreview = ({ file, size }: UploadPreviewProps) => {\n  const isImage = file?.type.startsWith(ASSET_TYPES.Image) ?? false;\n  const [src, setSrc] = useState<string>();\n\n  useEffect(() => {\n    if (!file || !isImage) {\n      setSrc(undefined);\n      return undefined;\n    }\n\n    const objectUrl = URL.createObjectURL(file);\n    setSrc(objectUrl);\n\n    return () => URL.revokeObjectURL(objectUrl);\n  }, [file, isImage]);\n\n  return <PreviewFrame size={size} src={src} mime={file?.type} />;\n};\n"],"names":["Frame","styled","Flex","theme","colors","neutral500","neutral150","$size","borderRadius","PreviewImage","img","PreviewFrame","size","src","alt","crossOrigin","mime","ext","_jsx","draggable","Icon","getAssetIcon","iconSize","justifyContent","alignItems","width","height","AssetPreview","asset","alternativeText","formats","url","updatedAt","isLocal","isUrlSigned","includes","ASSET_TYPES","Image","sizedFormats","preferredUrl","thumbnail","small","rawUrl","prefixFileUrlWithBackendUrl","cacheKey","Date","getTime","undefined","UploadPreview","file","isImage","type","startsWith","setSrc","useState","useEffect","objectUrl","URL","createObjectURL","revokeObjectURL"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AssetRow.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var translations = require('../../utils/translations.js');
+var AssetPreview = require('./AssetPreview.js');
+var FieldControls = require('./FieldControls.js');
+var UploadProgressBar = require('./UploadProgressBar.js');
+
+const ROW_COLORS = {
+    neutral: {
+        background: 'neutral100',
+        border: 'neutral200'
+    },
+    primary: {
+        background: 'primary100',
+        border: 'primary200'
+    },
+    danger: {
+        background: 'danger100',
+        border: 'danger200'
+    }
+};
+const Row = styledComponents.styled(designSystem.Flex)`
+  min-height: 7.2rem;
+  background: ${({ theme, $tone })=>theme.colors[ROW_COLORS[$tone].background]};
+  border: 1px solid ${({ theme, $tone })=>theme.colors[ROW_COLORS[$tone].border]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Name = styledComponents.styled(designSystem.Typography)`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const RowFrame = ({ tone, children })=>/*#__PURE__*/ jsxRuntime.jsx(Row, {
+        $tone: tone,
+        alignItems: "center",
+        gap: 4,
+        padding: 4,
+        children: children
+    });
+/**
+ * The asset a single-value field holds.
+ */ const AssetRow = ({ asset, disabled = false, onCopyLink, onEdit, onRemove })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(RowFrame, {
+        tone: "neutral",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
+                asset: asset,
+                size: "S"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Name, {
+                textColor: "neutral800",
+                flex: 1,
+                children: asset.name
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 2,
+                shrink: 0,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(FieldControls.GhostIconButton, {
+                        onClick: ()=>onCopyLink(asset),
+                        label: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.actions.copy-link'),
+                            defaultMessage: 'Copy link to {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {})
+                    }),
+                    onEdit && /*#__PURE__*/ jsxRuntime.jsx(FieldControls.GhostIconButton, {
+                        disabled: disabled,
+                        onClick: ()=>onEdit(asset),
+                        label: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.actions.edit'),
+                            defaultMessage: 'Edit {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(FieldControls.GhostIconButton, {
+                        disabled: disabled,
+                        onClick: ()=>onRemove(asset),
+                        label: formatMessage({
+                            id: translations.getTranslationKey('content-manager.input.actions.remove'),
+                            defaultMessage: 'Remove {name}'
+                        }, {
+                            name: asset.name
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+/**
+ * A file a single-value field is uploading, or failed to upload.
+ */ const UploadRow = ({ upload, disabled = false, onCancel, onRetry, onRemove })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const canRetry = upload.isInStore || upload.sourceFile !== undefined;
+    if (upload.status === 'failed') {
+        return /*#__PURE__*/ jsxRuntime.jsxs(RowFrame, {
+            tone: "danger",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.UploadPreview, {
+                    file: upload.sourceFile,
+                    size: "S"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(Name, {
+                    textColor: "danger600",
+                    flex: 1,
+                    children: upload.name
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    gap: 2,
+                    shrink: 0,
+                    children: [
+                        canRetry && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                            variant: "ghost",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowClockwise, {}),
+                            disabled: disabled,
+                            onClick: ()=>onRetry(upload),
+                            children: formatMessage({
+                                id: translations.getTranslationKey('upload.progress.retry'),
+                                defaultMessage: 'Retry'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                            variant: "danger-light",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {}),
+                            disabled: disabled,
+                            onClick: ()=>onRemove(upload),
+                            children: formatMessage({
+                                id: translations.getTranslationKey('content-manager.input.actions.remove-failed'),
+                                defaultMessage: 'Remove'
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    const uploadingLabel = formatMessage({
+        id: translations.getTranslationKey('upload.progress.file.uploading'),
+        defaultMessage: 'Uploading...'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs(RowFrame, {
+        tone: "primary",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.UploadPreview, {
+                file: upload.sourceFile,
+                size: "S"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 2,
+                flex: 1,
+                minWidth: 0,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        justifyContent: "space-between",
+                        gap: 4,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(Name, {
+                                textColor: "neutral800",
+                                children: upload.name
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                shrink: 0,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    variant: "pi",
+                                    textColor: "neutral600",
+                                    children: uploadingLabel
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(UploadProgressBar.UploadProgressBar, {
+                        progress: upload.progress,
+                        label: uploadingLabel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                shrink: 0,
+                children: /*#__PURE__*/ jsxRuntime.jsx(FieldControls.GhostIconButton, {
+                    onClick: ()=>onCancel(upload),
+                    label: formatMessage({
+                        id: translations.getTranslationKey('content-manager.input.actions.cancel'),
+                        defaultMessage: 'Cancel upload of {name}'
+                    }, {
+                        name: upload.name
+                    }),
+                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
+                })
+            })
+        ]
+    });
+};
+
+exports.AssetRow = AssetRow;
+exports.UploadRow = UploadRow;
+//# sourceMappingURL=AssetRow.js.map