@strapi/upload 5.0.6 → 5.1.1

package/dist/_chunks/{index-DKKpjnQN.mjs → index-LM-DLJqd.mjs}

@@ -1,19 +1,19 @@
 import { ChevronUp, ChevronDown, Cross, CaretDown, Link, FilePdf, File as File$1, Check, Trash, Download, Crop, Pencil, Folder, Eye, CaretUp, Plus, Filter, ChevronLeft, ChevronRight, Search, List, GridFour, PlusCircle, Images } from "@strapi/icons";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useEffect, useState, useMemo, useRef, useCallback, forwardRef, createElement, createContext, useContext, useLayoutEffect } from "react";
+import { useMemo, useState, useEffect, forwardRef, useRef, createElement, createContext, useContext, useLayoutEffect } from "react";
 import PropTypes from "prop-types";
-import { useNotification, useFetchClient, useRBAC, useTracking, ConfirmDialog, useQueryParams, Layouts, Page, translatedErrors, useField } from "@strapi/admin/strapi-admin";
+import { translatedErrors, useNotification, useFetchClient, useRBAC, useTracking, useClipboard, ConfirmDialog, useQueryParams, Layouts, Page, useField } from "@strapi/admin/strapi-admin";
 import { useNotifyAT, Box, Grid, Flex, Typography, Modal, IconButton, ProgressBar, Dialog, Badge, Menu, FocusTrap, Button, VisuallyHidden, Loader, Field, TextInput, CardAction, Card as Card$1, CardHeader, CardCheckbox, CardBody, CardContent, CardTitle, CardSubtitle, CardBadge, CardAsset as CardAsset$2, CardTimer, KeyboardNavigable, CrumbSimpleMenu, MenuItem, Breadcrumbs as Breadcrumbs$1, CrumbLink, Crumb, SingleSelect, SingleSelectOption, Avatar, Tbody, Tr, Td, Checkbox, Table, Thead, Th, Tooltip, Tag, DateTimePicker, Popover, SearchForm, Searchbar, Divider, Tabs, Textarea, CarouselActions, CarouselInput, CarouselSlide } from "@strapi/design-system";
 import { useIntl } from "react-intl";
 import { styled, useTheme } from "styled-components";
 import byteSize from "byte-size";
 import { intervalToDuration } from "date-fns";
 import { stringify } from "qs";
+import * as yup from "yup";
 import { useQuery, useMutation, useQueryClient } from "react-query";
 import { Formik, Form } from "formik";
 import isEqual from "lodash/isEqual";
-import * as yup from "yup";
 import ReactSelect, { components } from "react-select";
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
@@ -32,7 +32,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => {
   });
 };
 const name$1 = "@strapi/upload";
-const version = "5.0.0";
+const version = "5.1.0";
 const description = "Makes it easy to upload images and files to your Strapi Application.";
 const license = "SEE LICENSE IN LICENSE";
 const author = {
@@ -119,6 +119,7 @@ const devDependencies = {
   "@testing-library/dom": "10.1.0",
   "@testing-library/react": "15.0.7",
   "@testing-library/user-event": "14.5.2",
+  "@types/byte-size": "8.1.2",
   "@types/fs-extra": "11.0.4",
   "@types/koa": "2.13.4",
   "@types/koa-range": "0.3.5",
@@ -140,7 +141,7 @@ const peerDependencies = {
   "styled-components": "^6.0.0"
 };
 const engines = {
-  node: ">=18.0.0 <=20.x.x",
+  node: ">=18.0.0 <=22.x.x",
   npm: ">=6.0.0"
 };
 const strapi = {
@@ -172,7 +173,7 @@ const appendSearchParamsToUrl = ({ url, params }) => {
   }
   const urlObj = new URL(url, window.strapi.backendURL);
   Object.entries(params).forEach(([key, value]) => {
-    if (value !== void 0) {
+    if (value !== void 0 && value !== null) {
       urlObj.searchParams.append(key, value);
     }
   });
@@ -201,6 +202,43 @@ const createAssetUrl = (asset, forThumbnail = true) => {
   const assetUrl = forThumbnail ? asset?.formats?.thumbnail?.url || asset.url : asset.url;
   return prefixFileUrlWithBackendUrl(assetUrl);
 };
+const displayedFilters = [
+  {
+    name: "createdAt",
+    fieldSchema: {
+      type: "date"
+    },
+    metadatas: { label: "createdAt" }
+  },
+  {
+    name: "updatedAt",
+    fieldSchema: {
+      type: "date"
+    },
+    metadatas: { label: "updatedAt" }
+  },
+  {
+    name: "mime",
+    fieldSchema: {
+      type: "enumeration",
+      options: [
+        { label: "audio", value: "audio" },
+        { label: "file", value: "file" },
+        { label: "image", value: "image" },
+        { label: "video", value: "video" }
+      ]
+    },
+    metadatas: { label: "type" }
+  }
+];
+const downloadFile = async (url, fileName) => {
+  const fileBlob = await fetch(url).then((res) => res.blob());
+  const urlDownload = window.URL.createObjectURL(fileBlob);
+  const link = document.createElement("a");
+  link.href = urlDownload;
+  link.setAttribute("download", fileName);
+  link.click();
+};
 function findRecursiveFolderByValue(data, value) {
   let result;
   function iter(a) {
@@ -214,7 +252,8 @@ function findRecursiveFolderByValue(data, value) {
   return result;
 }
 function formatBytes(receivedBytes, decimals = 0) {
-  const { value, unit } = byteSize(receivedBytes * 1e3, { precision: decimals });
+  const realBytes = typeof receivedBytes === "string" ? Number(receivedBytes) : receivedBytes;
+  const { value, unit } = byteSize(realBytes * 1e3, { precision: decimals });
   if (!unit) {
     return "0B";
   }
@@ -225,9 +264,81 @@ const formatDuration = (durationInSecond) => {
   const duration = intervalToDuration({ start: 0, end: durationInSecond * 1e3 });
   return `${zeroPad(duration.hours)}:${zeroPad(duration.minutes)}:${zeroPad(duration.seconds)}`;
 };
+const toSingularTypes = (types) => {
+  if (!types) {
+    return [];
+  }
+  return types.map((type) => type.substring(0, type.length - 1));
+};
+const getAllowedFiles = (pluralTypes, files2) => {
+  const singularTypes = toSingularTypes(pluralTypes);
+  const allowedFiles = files2.filter((file) => {
+    const fileType = file?.mime?.split("/")[0];
+    if (!fileType) {
+      return false;
+    }
+    if (singularTypes.includes("file") && !["video", "image", "audio"].includes(fileType)) {
+      return true;
+    }
+    return singularTypes.includes(fileType);
+  });
+  return allowedFiles;
+};
+function getPrefixedId(message, callback) {
+  const prefixedMessage = `apiError.${message}`;
+  if (typeof callback === "function") {
+    return callback(prefixedMessage);
+  }
+  return prefixedMessage;
+}
+function normalizeError(error, { name: name2, intlMessagePrefixCallback }) {
+  const { message } = error;
+  const normalizedError = {
+    id: getPrefixedId(message, intlMessagePrefixCallback),
+    defaultMessage: message,
+    name: error.name ?? name2,
+    values: {}
+  };
+  if ("path" in error) {
+    normalizedError.values = { path: error.path.join(".") };
+  }
+  return normalizedError;
+}
+const validateErrorIsYupValidationError = (err) => typeof err.details === "object" && err.details !== null && "errors" in err.details;
+function normalizeAPIError(apiError, intlMessagePrefixCallback) {
+  const error = apiError.response?.data.error;
+  if (error) {
+    if (validateErrorIsYupValidationError(error)) {
+      return {
+        name: error.name,
+        message: error?.message || null,
+        errors: error.details.errors.map(
+          (err) => normalizeError(err, { name: error.name, intlMessagePrefixCallback })
+        )
+      };
+    }
+    return normalizeError(error, { intlMessagePrefixCallback });
+  }
+  return null;
+}
+function getAPIInnerErrors(error, { getTrad: getTrad2 }) {
+  const normalizedError = normalizeAPIError(error, getTrad2);
+  if (normalizedError && "errors" in normalizedError) {
+    return normalizedError.errors.reduce((acc, error2) => {
+      if ("path" in error2.values) {
+        acc[error2.values.path] = {
+          id: error2.id,
+          defaultMessage: error2.defaultMessage
+        };
+      }
+      return acc;
+    }, {});
+  }
+  return normalizedError?.defaultMessage;
+}
 const pluginId = pluginPkg.name.replace(/^@strapi\//i, "");
 const getTrad = (id2) => `${pluginId}.${id2}`;
-const getBreadcrumbDataML = (folder) => {
+const getBreadcrumbDataCM = (folder) => {
   let data = [
     {
       id: null,
@@ -265,7 +376,8 @@ const getFolderURL = (pathname, currentQuery, { folder, folderPath } = {}) => {
   );
   return `${pathname}${queryParamsString ? `?${queryParamsString}` : ""}`;
 };
-function flattenTree(tree, parent, depth = 0) {
+const getFileExtension = (ext) => ext && ext[0] === "." ? ext.substring(1) : ext;
+function flattenTree(tree, parent = null, depth = 0) {
   return tree.flatMap(
     (item) => item.children ? [{ ...item, parent: parent?.value, depth }, ...flattenTree(item.children, item, depth + 1)] : { ...item, depth, parent: parent?.value }
   );
@@ -280,70 +392,178 @@ const getFolderParents = (folders, currentFolderId) => {
   let { parent } = currentFolder;
   while (parent !== void 0) {
     let parentToStore = flatFolders.find(({ value }) => value === parent);
-    parents.push({ id: parentToStore.value, label: parentToStore.label });
-    parent = parentToStore.parent;
+    parents.push({ id: parentToStore?.value, label: parentToStore?.label });
+    parent = parentToStore?.parent;
   }
   return parents.reverse();
 };
-const toSingularTypes = (types) => {
-  if (!types) {
-    return [];
+const move = (array, oldIndex, newIndex) => {
+  if (newIndex >= array.length) {
+    newIndex = array.length - 1;
   }
-  return types.map((type) => type.substring(0, type.length - 1));
+  array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);
+  return array;
 };
-const getFileExtension = (ext) => ext && ext[0] === "." ? ext.substring(1) : ext;
-function getPrefixedId(message, callback) {
-  const prefixedMessage = `apiError.${message}`;
-  if (typeof callback === "function") {
-    return callback(prefixedMessage);
+const moveElement = (array, index2, offset) => {
+  const newIndex = index2 + offset;
+  return move(array, index2, newIndex);
+};
+const prefixPluginTranslations = (trad, pluginId2) => {
+  if (!pluginId2) {
+    throw new TypeError("pluginId can't be empty");
   }
-  return prefixedMessage;
-}
-function normalizeError(error, { name: name2, intlMessagePrefixCallback }) {
-  const { message } = error;
-  const normalizedError = {
-    id: getPrefixedId(message, intlMessagePrefixCallback),
-    defaultMessage: message,
-    name: error.name ?? name2,
-    values: {}
-  };
-  if ("path" in error) {
-    normalizedError.values = { path: error.path.join(".") };
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId2}.${current}`] = trad[current];
+    return acc;
+  }, {});
+};
+var AssetType$1 = /* @__PURE__ */ ((AssetType2) => {
+  AssetType2["Video"] = "video";
+  AssetType2["Image"] = "image";
+  AssetType2["Document"] = "doc";
+  AssetType2["Audio"] = "audio";
+  return AssetType2;
+})(AssetType$1 || {});
+var AssetSource$1 = /* @__PURE__ */ ((AssetSource2) => {
+  AssetSource2["Url"] = "url";
+  AssetSource2["Computer"] = "computer";
+  return AssetSource2;
+})(AssetSource$1 || {});
+const PERMISSIONS$1 = {
+  // This permission regards the main component (App) and is used to tell
+  // If the plugin link should be displayed in the menu
+  // And also if the plugin is accessible. This use case is found when a user types the url of the
+  // plugin directly in the browser
+  main: [
+    { action: "plugin::upload.read", subject: null },
+    {
+      action: "plugin::upload.assets.create",
+      subject: null
+    },
+    {
+      action: "plugin::upload.assets.update",
+      subject: null
+    }
+  ],
+  copyLink: [
+    {
+      action: "plugin::upload.assets.copy-link",
+      subject: null
+    }
+  ],
+  create: [
+    {
+      action: "plugin::upload.assets.create",
+      subject: null
+    }
+  ],
+  download: [
+    {
+      action: "plugin::upload.assets.download",
+      subject: null
+    }
+  ],
+  read: [{ action: "plugin::upload.read", subject: null }],
+  configureView: [{ action: "plugin::upload.configure-view", subject: null }],
+  settings: [{ action: "plugin::upload.settings.read", subject: null }],
+  update: [{ action: "plugin::upload.assets.update", subject: null, fields: null }]
+};
+const typeFromMime = (mime) => {
+  if (mime.includes(AssetType$1.Image)) {
+    return AssetType$1.Image;
   }
-  return normalizedError;
+  if (mime.includes(AssetType$1.Video)) {
+    return AssetType$1.Video;
+  }
+  if (mime.includes(AssetType$1.Audio)) {
+    return AssetType$1.Audio;
+  }
+  return AssetType$1.Document;
+};
+const rawFileToAsset = (rawFile, assetSource) => {
+  return {
+    size: rawFile.size / 1e3,
+    createdAt: new Date(rawFile.lastModified).toISOString(),
+    name: rawFile.name,
+    source: assetSource,
+    type: typeFromMime(rawFile.type),
+    url: URL.createObjectURL(rawFile),
+    ext: rawFile.name.split(".").pop(),
+    mime: rawFile.type,
+    rawFile,
+    isLocal: true
+  };
+};
+function getFilenameFromURL(url) {
+  return new URL(url).pathname.split("/").pop();
 }
-const validateErrorIsYupValidationError = (err) => typeof err.details === "object" && err.details !== null && "errors" in err.details;
-function normalizeAPIError(apiError, intlMessagePrefixCallback) {
-  const error = apiError.response?.data.error;
-  if (error) {
-    if (validateErrorIsYupValidationError(error)) {
+const urlsToAssets = async (urls) => {
+  const assetPromises = urls.map(
+    (url) => fetch(url).then(async (res) => {
+      const blob = await res.blob();
+      const loadedFile = new File([blob], getFilenameFromURL(res.url), {
+        type: res.headers.get("content-type") || void 0
+      });
       return {
-        name: error.name,
-        message: error?.message || null,
-        errors: error.details.errors.map(
-          (err) => normalizeError(err, { name: error.name, intlMessagePrefixCallback })
-        )
+        name: loadedFile.name,
+        url: res.url,
+        mime: res.headers.get("content-type"),
+        rawFile: loadedFile
       };
-    }
-    return normalizeError(error, { intlMessagePrefixCallback });
-  }
-  return null;
-}
-function getAPIInnerErrors(error, { getTrad: getTrad2 }) {
-  const normalizedError = normalizeAPIError(error, getTrad2);
-  if (normalizedError && "errors" in normalizedError) {
-    return normalizedError.errors.reduce((acc, error2) => {
-      if ("path" in error2.values) {
-        acc[error2.values.path] = {
-          id: error2.id,
-          defaultMessage: error2.defaultMessage
-        };
+    })
+  );
+  const assetsResults = await Promise.all(assetPromises);
+  const assets = assetsResults.map((fullFilledAsset) => ({
+    source: AssetSource$1.Url,
+    name: fullFilledAsset.name,
+    type: typeFromMime(fullFilledAsset.mime),
+    url: fullFilledAsset.url,
+    ext: fullFilledAsset.url.split(".").pop(),
+    mime: fullFilledAsset.mime,
+    rawFile: fullFilledAsset.rawFile
+  }));
+  return assets;
+};
+const urlSchema = yup.object().shape({
+  urls: yup.string().test({
+    name: "isUrlValid",
+    // eslint-disable-next-line no-template-curly-in-string
+    message: "${path}",
+    test(values = "") {
+      const urls = values.split(/\r?\n/);
+      if (urls.length === 0) {
+        return this.createError({
+          path: this.path,
+          message: translatedErrors.min.id
+        });
+      }
+      if (urls.length > 20) {
+        return this.createError({
+          path: this.path,
+          message: translatedErrors.max.id
+        });
+      }
+      const filtered = urls.filter((val) => {
+        try {
+          new URL(val);
+          return false;
+        } catch (err) {
+          return true;
+        }
+      });
+      const filteredLength = filtered.length;
+      if (filteredLength === 0) {
+        return true;
       }
-      return acc;
-    }, {});
-  }
-  return normalizedError?.defaultMessage;
-}
+      const errorMessage = filteredLength > 1 ? "form.upload-url.error.url.invalids" : "form.upload-url.error.url.invalid";
+      return this.createError({
+        path: this.path,
+        message: getTrad(errorMessage),
+        params: { number: filtered.length }
+      });
+    }
+  })
+});
 const AssetType = {
   Video: "video",
   Image: "image",
@@ -592,7 +812,7 @@ const useAssets = ({ skipWhen = false, query = {} } = {}) => {
       }
     }
   );
-  useEffect(() => {
+  React.useEffect(() => {
     if (data) {
       notifyStatus(
         formatMessage({
@@ -602,7 +822,7 @@ const useAssets = ({ skipWhen = false, query = {} } = {}) => {
       );
     }
   }, [data, formatMessage, notifyStatus]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (error) {
       toggleNotification({
         type: "danger",
@@ -679,7 +899,7 @@ const useFolders = ({ enabled = true, query = {} } = {}) => {
   }, [data, formatMessage, notifyStatus]);
   return { data, error, isLoading };
 };
-const { main, ...restPermissions } = PERMISSIONS;
+const { main, ...restPermissions } = PERMISSIONS$1;
 const useMediaLibraryPermissions = () => {
   const { allowedActions, isLoading } = useRBAC(restPermissions);
   return { ...allowedActions, isLoading };
@@ -707,7 +927,7 @@ const useConfig = () => {
       /**
        * We're cementing that we always expect an object to be returned.
        */
-      select: (data) => !data ? {} : data
+      select: (data) => data || {}
     }
   );
   const putMutation = useMutation(
@@ -737,7 +957,7 @@ const useModalQueryParams = (initialState) => {
   const {
     config: { data: config }
   } = useConfig();
-  const [queryObject, setQueryObject] = useState({
+  const [queryObject, setQueryObject] = React.useState({
     page: 1,
     sort: "updatedAt:DESC",
     pageSize: 10,
@@ -746,8 +966,8 @@ const useModalQueryParams = (initialState) => {
     },
     ...initialState
   });
-  useEffect(() => {
-    if (config) {
+  React.useEffect(() => {
+    if (config && "sort" in config && "pageSize" in config) {
       setQueryObject((prevQuery) => ({
         ...prevQuery,
         sort: config.sort,
@@ -756,24 +976,32 @@ const useModalQueryParams = (initialState) => {
     }
   }, [config]);
   const handleChangeFilters = (nextFilters) => {
-    trackUsage("didFilterMediaLibraryElements", {
-      location: "content-manager",
-      filter: Object.keys(nextFilters[nextFilters.length - 1])[0]
-    });
-    setQueryObject((prev) => ({ ...prev, page: 1, filters: { $and: nextFilters } }));
+    if (nextFilters) {
+      trackUsage("didFilterMediaLibraryElements", {
+        location: "content-manager",
+        filter: Object.keys(nextFilters[nextFilters.length - 1])[0]
+      });
+      setQueryObject((prev) => ({ ...prev, page: 1, filters: { $and: nextFilters } }));
+    }
   };
   const handleChangePageSize = (pageSize) => {
-    setQueryObject((prev) => ({ ...prev, pageSize: parseInt(pageSize, 10), page: 1 }));
+    setQueryObject((prev) => ({
+      ...prev,
+      pageSize: typeof pageSize === "string" ? parseInt(pageSize, 10) : pageSize,
+      page: 1
+    }));
   };
   const handeChangePage = (page) => {
     setQueryObject((prev) => ({ ...prev, page }));
   };
   const handleChangeSort = (sort) => {
-    trackUsage("didSortMediaLibraryElements", {
-      location: "content-manager",
-      sort
-    });
-    setQueryObject((prev) => ({ ...prev, sort }));
+    if (sort) {
+      trackUsage("didSortMediaLibraryElements", {
+        location: "content-manager",
+        sort
+      });
+      setQueryObject((prev) => ({ ...prev, sort }));
+    }
   };
   const handleChangeSearch = (_q) => {
     if (_q) {
@@ -862,28 +1090,6 @@ const useSelectionState = (keys, initialValue) => {
     { selectOne, selectAll, selectOnly, selectMultiple, deselectMultiple, setSelections }
   ];
 };
-const getAllowedFiles = (pluralTypes, files2) => {
-  const singularTypes = toSingularTypes(pluralTypes);
-  const allowedFiles = files2.filter((file) => {
-    const fileType = file.mime.split("/")[0];
-    if (singularTypes.includes("file") && !["video", "image", "audio"].includes(fileType)) {
-      return true;
-    }
-    return singularTypes.includes(fileType);
-  });
-  return allowedFiles;
-};
-const move = (array, oldIndex, newIndex) => {
-  if (newIndex >= array.length) {
-    newIndex = array.length - 1;
-  }
-  array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);
-  return array;
-};
-const moveElement = (array, index2, offset) => {
-  const newIndex = index2 + offset;
-  return move(array, index2, newIndex);
-};
 const editAssetRequest = (asset, file, signal, onProgress, post) => {
   const endpoint2 = `/${pluginId}?id=${asset.id}`;
   const formData = new FormData();
@@ -904,33 +1110,30 @@ const editAssetRequest = (asset, file, signal, onProgress, post) => {
   }).then((res) => res.data);
 };
 const useEditAsset = () => {
-  const [progress, setProgress] = useState(0);
+  const [progress, setProgress] = React.useState(0);
   const { formatMessage } = useIntl();
   const { toggleNotification } = useNotification();
   const queryClient = useQueryClient();
   const abortController = new AbortController();
   const signal = abortController.signal;
   const { post } = useFetchClient();
-  const mutation = useMutation(
-    ({ asset, file }) => editAssetRequest(asset, file, signal, setProgress, post),
-    {
-      onSuccess() {
-        queryClient.refetchQueries([pluginId, "assets"], { active: true });
-        queryClient.refetchQueries([pluginId, "asset-count"], { active: true });
-        queryClient.refetchQueries([pluginId, "folders"], { active: true });
-      },
-      onError(reason) {
-        if (reason.response.status === 403) {
-          toggleNotification({
-            type: "info",
-            message: formatMessage({ id: getTrad("permissions.not-allowed.update") })
-          });
-        } else {
-          toggleNotification({ type: "danger", message: reason.message });
-        }
+  const mutation = useMutation(({ asset, file }) => editAssetRequest(asset, file, signal, setProgress, post), {
+    onSuccess() {
+      queryClient.refetchQueries([pluginId, "assets"], { active: true });
+      queryClient.refetchQueries([pluginId, "asset-count"], { active: true });
+      queryClient.refetchQueries([pluginId, "folders"], { active: true });
+    },
+    onError(reason) {
+      if (reason?.response?.status === 403) {
+        toggleNotification({
+          type: "info",
+          message: formatMessage({ id: getTrad("permissions.not-allowed.update") })
+        });
+      } else {
+        toggleNotification({ type: "danger", message: reason?.message });
       }
     }
-  );
+  });
   const editAsset = (asset, file) => mutation.mutateAsync({ asset, file });
   const cancel = () => abortController.abort();
   return { ...mutation, cancel, editAsset, progress, status: mutation.status };
@@ -952,7 +1155,9 @@ const useFolderStructure = ({ enabled = true } = {}) => {
     const {
       data: { data: data2 }
     } = await get("/upload/folder-structure");
-    const children = data2.map((f) => recursiveRenameKeys(f, (key) => FIELD_MAPPING?.[key] ?? key));
+    const children = data2.map(
+      (f) => recursiveRenameKeys(f, (key) => FIELD_MAPPING?.[key] ?? key)
+    );
     return [
       {
         value: null,
@@ -1322,10 +1527,10 @@ const DialogHeader = () => {
 };
 const QUALITY = 1;
 const useCropImg = () => {
-  const cropperRef = useRef();
-  const [isCropping, setIsCropping] = useState(false);
-  const [size, setSize] = useState({ width: void 0, height: void 0 });
-  useEffect(() => {
+  const cropperRef = React.useRef();
+  const [isCropping, setIsCropping] = React.useState(false);
+  const [size, setSize] = React.useState({ width: void 0, height: void 0 });
+  React.useEffect(() => {
     return () => {
       if (cropperRef.current) {
         cropperRef.current.destroy();
@@ -1372,7 +1577,7 @@ const useCropImg = () => {
           resolve(
             new File([blob], name2, {
               type: mimeType,
-              lastModifiedDate
+              lastModified: new Date(lastModifiedDate).getTime()
             })
           );
         },
@@ -1409,7 +1614,7 @@ const uploadAsset = (asset, folderId, signal, onProgress, post) => {
   }).then((res) => res.data);
 };
 const useUpload = () => {
-  const [progress, setProgress] = useState(0);
+  const [progress, setProgress] = React.useState(0);
   const queryClient = useQueryClient();
   const abortController = new AbortController();
   const signal = abortController.signal;
@@ -1435,36 +1640,6 @@ const useUpload = () => {
     status: mutation.status
   };
 };
-const downloadFile = async (url, fileName) => {
-  const fileBlob = await fetch(url).then((res) => res.blob());
-  const urlDownload = window.URL.createObjectURL(fileBlob);
-  const link = document.createElement("a");
-  link.href = urlDownload;
-  link.setAttribute("download", fileName);
-  link.click();
-};
-const useClipboard = () => {
-  const copy = useCallback(async (value) => {
-    try {
-      if (typeof value !== "string" && typeof value !== "number") {
-        throw new Error(
-          `Cannot copy typeof ${typeof value} to clipboard, must be a string or number`
-        );
-      } else if (value === "") {
-        throw new Error(`Cannot copy empty string to clipboard.`);
-      }
-      const stringifiedValue = value.toString();
-      await navigator.clipboard.writeText(stringifiedValue);
-      return true;
-    } catch (error) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("Copy failed", error);
-      }
-      return false;
-    }
-  }, []);
-  return { copy };
-};
 const CopyLinkButton = ({ url }) => {
   const { toggleNotification } = useNotification();
   const { formatMessage } = useIntl();
@@ -1554,23 +1729,26 @@ const useRemoveAsset = (onSuccess) => {
   const { formatMessage } = useIntl();
   const queryClient = useQueryClient();
   const { del } = useFetchClient();
-  const mutation = useMutation((assetId) => del(`/upload/files/${assetId}`), {
-    onSuccess() {
-      queryClient.refetchQueries([pluginId, "assets"], { active: true });
-      queryClient.refetchQueries([pluginId, "asset-count"], { active: true });
-      toggleNotification({
-        type: "success",
-        message: formatMessage({
-          id: "modal.remove.success-label",
-          defaultMessage: "Elements have been successfully deleted."
-        })
-      });
-      onSuccess();
-    },
-    onError(error) {
-      toggleNotification({ type: "danger", message: error.message });
+  const mutation = useMutation(
+    (assetId) => del(`/upload/files/${assetId}`),
+    {
+      onSuccess() {
+        queryClient.refetchQueries([pluginId, "assets"], { active: true });
+        queryClient.refetchQueries([pluginId, "asset-count"], { active: true });
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: "modal.remove.success-label",
+            defaultMessage: "Elements have been successfully deleted."
+          })
+        });
+        onSuccess();
+      },
+      onError(error) {
+        toggleNotification({ type: "danger", message: error.message });
+      }
     }
-  });
+  );
   const removeAsset = async (assetId) => {
     await mutation.mutateAsync(assetId);
   };
@@ -2365,7 +2543,7 @@ const useBulkRemove = () => {
       });
     },
     onError(error) {
-      toggleNotification({ type: "danger", message: error.message });
+      toggleNotification({ type: "danger", message: error?.message });
     }
   });
   const remove = (...args) => mutation.mutateAsync(...args);
@@ -3809,35 +3987,6 @@ TableList.propTypes = {
   shouldDisableBulkSelect: PropTypes.bool,
   sortQuery: PropTypes.string
 };
-const displayedFilters = [
-  {
-    name: "createdAt",
-    fieldSchema: {
-      type: "date"
-    },
-    metadatas: { label: "createdAt" }
-  },
-  {
-    name: "updatedAt",
-    fieldSchema: {
-      type: "date"
-    },
-    metadatas: { label: "updatedAt" }
-  },
-  {
-    name: "mime",
-    fieldSchema: {
-      type: "enumeration",
-      options: [
-        { label: "audio", value: "audio" },
-        { label: "file", value: "file" },
-        { label: "image", value: "image" },
-        { label: "video", value: "video" }
-      ]
-    },
-    metadatas: { label: "type" }
-  }
-];
 const FilterTag = ({ attribute, filter, onClick, operator, value }) => {
   const { formatMessage, formatDate, formatTime } = useIntl();
   const handleClick = () => {
@@ -3884,7 +4033,7 @@ const FilterList = ({ appliedFilters, filtersSchema, onRemoveFilter }) => {
     const nextFilters = appliedFilters.filter((prevFilter) => {
       const name2 = Object.keys(filter)[0];
       const filterType = Object.keys(filter[name2])[0];
-      const value = filter[name2][filterType];
+      const value = decodeURIComponent(filter[name2][filterType]);
       return prevFilter[name2]?.[filterType] !== value;
     });
     onRemoveFilter(nextFilters);
@@ -3895,6 +4044,13 @@ const FilterList = ({ appliedFilters, filtersSchema, onRemoveFilter }) => {
     const filterObj = filter[attributeName];
     const operator = Object.keys(filterObj)[0];
     let value = filterObj[operator];
+    if (Array.isArray(value)) {
+      value = value.join(", ");
+    } else if (typeof value === "object") {
+      value = Object.values(value).join(", ");
+    } else {
+      value = Array.isArray(value) || typeof value === "object" ? Object.values(value).join(", ") : decodeURIComponent(value);
+    }
     let displayedOperator = operator;
     if (attribute.name === "mime") {
       displayedOperator = operator === "$contains" ? "$eq" : "$ne";
@@ -4102,7 +4258,8 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
   const handleSubmit = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (modifiedData.value) {
+    const encodedValue = encodeURIComponent(modifiedData.value);
+    if (encodedValue) {
       if (modifiedData.name === "mime") {
         const alreadyAppliedFilters = filters.filter((filter) => {
           return Object.keys(filter)[0] === "mime";
@@ -4184,10 +4341,10 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
         return;
       }
       const hasFilter = filters.find((filter) => {
-        return filter[modifiedData.name] && filter[modifiedData.name]?.[modifiedData.filter] === modifiedData.value;
+        return filter[modifiedData.name] && filter[modifiedData.name]?.[modifiedData.filter] === encodedValue;
       }) !== void 0;
       if (!hasFilter) {
-        let filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: modifiedData.value } };
+        let filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: encodedValue } };
         const nextFilters = [...filters, filterToAdd];
         onSubmit(nextFilters);
       }
@@ -4689,7 +4846,7 @@ const BrowseStep = ({
     isSelectable: isSelectable(singularTypes, asset?.mime),
     type: "asset"
   }));
-  const breadcrumbs = !isCurrentFolderLoading && getBreadcrumbDataML(currentFolder);
+  const breadcrumbs = !isCurrentFolderLoading && getBreadcrumbDataCM(currentFolder);
   const allAllowedAsset = getAllowedFiles(allowedTypes, assets);
   const areAllAssetSelected = allAllowedAsset.length > 0 && selectedAssets.length > 0 && allAllowedAsset.every(
     (asset) => selectedAssets.findIndex((currAsset) => currAsset.id === asset.id) !== -1
@@ -4740,7 +4897,7 @@ const BrowseStep = ({
           }
         )
       ] }),
-      (assetCount > 0 || folderCount > 0 || isSearching) && /* @__PURE__ */ jsxs(Flex, { marginLeft: "auto", shrink: 0, children: [
+      (assetCount > 0 || folderCount > 0 || isSearching) && /* @__PURE__ */ jsxs(Flex, { marginLeft: "auto", shrink: 0, gap: 2, children: [
         /* @__PURE__ */ jsx(ActionContainer, { paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -5283,32 +5440,6 @@ const TabsRoot = styled(Tabs.Root)`
   flex-direction: column;
   overflow: hidden;
 `;
-const typeFromMime = (mime) => {
-  if (mime.includes(AssetType.Image)) {
-    return AssetType.Image;
-  }
-  if (mime.includes(AssetType.Video)) {
-    return AssetType.Video;
-  }
-  if (mime.includes(AssetType.Audio)) {
-    return AssetType.Audio;
-  }
-  return AssetType.Document;
-};
-const rawFileToAsset = (rawFile, assetSource) => {
-  return {
-    size: rawFile.size / 1e3,
-    createdAt: new Date(rawFile.lastModified).toISOString(),
-    name: rawFile.name,
-    source: assetSource,
-    type: typeFromMime(rawFile.type),
-    url: URL.createObjectURL(rawFile),
-    ext: rawFile.name.split(".").pop(),
-    mime: rawFile.type,
-    rawFile,
-    isLocal: true
-  };
-};
 const Wrapper = styled(Flex)`
   flex-direction: column;
 `;
@@ -5431,76 +5562,6 @@ FromComputerForm.propTypes = {
   onAddAssets: PropTypes.func.isRequired,
   trackedLocation: PropTypes.string
 };
-function getFilenameFromURL(url) {
-  return new URL(url).pathname.split("/").pop();
-}
-const urlsToAssets = async (urls) => {
-  const assetPromises = urls.map(
-    (url) => fetch(url).then(async (res) => {
-      const blob = await res.blob();
-      const loadedFile = new File([blob], getFilenameFromURL(res.url), {
-        type: res.headers.get("content-type")
-      });
-      return {
-        name: loadedFile.name,
-        url: res.url,
-        mime: res.headers.get("content-type"),
-        rawFile: loadedFile
-      };
-    })
-  );
-  const assetsResults = await Promise.all(assetPromises);
-  const assets = assetsResults.map((fullFilledAsset) => ({
-    source: AssetSource.Url,
-    name: fullFilledAsset.name,
-    type: typeFromMime(fullFilledAsset.mime),
-    url: fullFilledAsset.url,
-    ext: fullFilledAsset.url.split(".").pop(),
-    mime: fullFilledAsset.mime,
-    rawFile: fullFilledAsset.rawFile
-  }));
-  return assets;
-};
-const urlSchema = yup.object().shape({
-  urls: yup.string().test({
-    name: "isUrlValid",
-    // eslint-disable-next-line no-template-curly-in-string
-    message: "${path}",
-    test(values = "") {
-      const urls = values.split(/\r?\n/);
-      if (urls.length === 0) {
-        return this.createError({
-          path: this.path,
-          message: translatedErrors.min.id
-        });
-      }
-      if (urls.length > 20) {
-        return this.createError({
-          path: this.path,
-          message: translatedErrors.max.id
-        });
-      }
-      const filtered = urls.filter((val) => {
-        try {
-          new URL(val);
-          return false;
-        } catch (err) {
-          return true;
-        }
-      });
-      const filteredLength = filtered.length;
-      if (filteredLength === 0) {
-        return true;
-      }
-      const errorMessage = filteredLength > 1 ? "form.upload-url.error.url.invalids" : "form.upload-url.error.url.invalid";
-      return this.createError({
-        path: this.path,
-        message: getTrad(errorMessage),
-        params: { number: filtered.length }
-      });
-    }
-  })
-});
 const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(void 0);
@@ -6533,15 +6594,6 @@ MediaLibraryInput.propTypes = {
   name: PropTypes.string.isRequired,
   required: PropTypes.bool
 };
-const prefixPluginTranslations = (trad, pluginId2) => {
-  if (!pluginId2) {
-    throw new TypeError("pluginId can't be empty");
-  }
-  return Object.keys(trad).reduce((acc, current) => {
-    acc[`${pluginId2}.${current}`] = trad[current];
-    return acc;
-  }, {});
-};
 const name = pluginPkg.strapi.name;
 const index = {
   register(app) {
@@ -6553,7 +6605,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => import("./index-p2ufusDD.mjs"),
+      Component: () => import("./index-24xAAxoi.mjs"),
       position: 4
     });
     app.addSettingsLink("global", {
@@ -6563,7 +6615,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       to: "media-library",
-      Component: () => import("./index-D0UI77ZE.mjs"),
+      Component: () => import("./index-BVvzCEIn.mjs"),
       permissions: PERMISSIONS.settings
     });
     app.addFields({ type: "media", Component: MediaLibraryInput });
@@ -6634,4 +6686,4 @@ export {
   FolderCardBodyAction as y,
   AssetGridList as z
 };
-//# sourceMappingURL=index-DKKpjnQN.mjs.map
+//# sourceMappingURL=index-LM-DLJqd.mjs.map