@strapi/upload 5.0.4 → 5.0.6

package/dist/_chunks/{index-Bg-hWXGc.mjs → index-DKKpjnQN.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 { useMemo, useState, useEffect, useCallback, forwardRef, useRef, createElement, createContext, useContext, useLayoutEffect } from "react";
+import { useEffect, useState, useMemo, useRef, useCallback, forwardRef, createElement, createContext, useContext, useLayoutEffect } from "react";
 import PropTypes from "prop-types";
-import { translatedErrors, useNotification, useFetchClient, useRBAC, useTracking, ConfirmDialog, useQueryParams, Layouts, Page, useField } from "@strapi/admin/strapi-admin";
+import { useNotification, useFetchClient, useRBAC, useTracking, ConfirmDialog, useQueryParams, Layouts, Page, translatedErrors, 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.2";
+const version = "5.0.0";
 const description = "Makes it easy to upload images and files to your Strapi Application.";
 const license = "SEE LICENSE IN LICENSE";
 const author = {
@@ -119,7 +119,6 @@ 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",
@@ -141,7 +140,7 @@ const peerDependencies = {
   "styled-components": "^6.0.0"
 };
 const engines = {
-  node: ">=18.0.0 <=22.x.x",
+  node: ">=18.0.0 <=20.x.x",
   npm: ">=6.0.0"
 };
 const strapi = {
@@ -173,7 +172,7 @@ const appendSearchParamsToUrl = ({ url, params }) => {
   }
   const urlObj = new URL(url, window.strapi.backendURL);
   Object.entries(params).forEach(([key, value]) => {
-    if (value !== void 0 && value !== null) {
+    if (value !== void 0) {
       urlObj.searchParams.append(key, value);
     }
   });
@@ -202,43 +201,6 @@ 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) {
@@ -252,8 +214,7 @@ function findRecursiveFolderByValue(data, value) {
   return result;
 }
 function formatBytes(receivedBytes, decimals = 0) {
-  const realBytes = typeof receivedBytes === "string" ? Number(receivedBytes) : receivedBytes;
-  const { value, unit } = byteSize(realBytes * 1e3, { precision: decimals });
+  const { value, unit } = byteSize(receivedBytes * 1e3, { precision: decimals });
   if (!unit) {
     return "0B";
   }
@@ -264,81 +225,9 @@ 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 getBreadcrumbDataCM = (folder) => {
+const getBreadcrumbDataML = (folder) => {
   let data = [
     {
       id: null,
@@ -376,8 +265,7 @@ const getFolderURL = (pathname, currentQuery, { folder, folderPath } = {}) => {
   );
   return `${pathname}${queryParamsString ? `?${queryParamsString}` : ""}`;
 };
-const getFileExtension = (ext) => ext && ext[0] === "." ? ext.substring(1) : ext;
-function flattenTree(tree, parent = null, depth = 0) {
+function flattenTree(tree, parent, depth = 0) {
   return tree.flatMap(
     (item) => item.children ? [{ ...item, parent: parent?.value, depth }, ...flattenTree(item.children, item, depth + 1)] : { ...item, depth, parent: parent?.value }
   );
@@ -392,178 +280,70 @@ 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 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 prefixPluginTranslations = (trad, pluginId2) => {
-  if (!pluginId2) {
-    throw new TypeError("pluginId can't be empty");
+const toSingularTypes = (types) => {
+  if (!types) {
+    return [];
   }
-  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 }]
+  return types.map((type) => type.substring(0, type.length - 1));
 };
-const typeFromMime = (mime) => {
-  if (mime.includes(AssetType$1.Image)) {
-    return AssetType$1.Image;
-  }
-  if (mime.includes(AssetType$1.Video)) {
-    return AssetType$1.Video;
-  }
-  if (mime.includes(AssetType$1.Audio)) {
-    return AssetType$1.Audio;
+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);
   }
-  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();
+  return prefixedMessage;
 }
-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: 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$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;
-      }
-      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 }
-      });
+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 AssetType = {
   Video: "video",
   Image: "image",
@@ -812,7 +592,7 @@ const useAssets = ({ skipWhen = false, query = {} } = {}) => {
       }
     }
   );
-  React.useEffect(() => {
+  useEffect(() => {
     if (data) {
       notifyStatus(
         formatMessage({
@@ -822,7 +602,7 @@ const useAssets = ({ skipWhen = false, query = {} } = {}) => {
       );
     }
   }, [data, formatMessage, notifyStatus]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (error) {
       toggleNotification({
         type: "danger",
@@ -899,7 +679,7 @@ const useFolders = ({ enabled = true, query = {} } = {}) => {
   }, [data, formatMessage, notifyStatus]);
   return { data, error, isLoading };
 };
-const { main, ...restPermissions } = PERMISSIONS$1;
+const { main, ...restPermissions } = PERMISSIONS;
 const useMediaLibraryPermissions = () => {
   const { allowedActions, isLoading } = useRBAC(restPermissions);
   return { ...allowedActions, isLoading };
@@ -927,7 +707,7 @@ const useConfig = () => {
       /**
        * We're cementing that we always expect an object to be returned.
        */
-      select: (data) => data || {}
+      select: (data) => !data ? {} : data
     }
   );
   const putMutation = useMutation(
@@ -957,7 +737,7 @@ const useModalQueryParams = (initialState) => {
   const {
     config: { data: config }
   } = useConfig();
-  const [queryObject, setQueryObject] = React.useState({
+  const [queryObject, setQueryObject] = useState({
     page: 1,
     sort: "updatedAt:DESC",
     pageSize: 10,
@@ -966,8 +746,8 @@ const useModalQueryParams = (initialState) => {
     },
     ...initialState
   });
-  React.useEffect(() => {
-    if (config && "sort" in config && "pageSize" in config) {
+  useEffect(() => {
+    if (config) {
       setQueryObject((prevQuery) => ({
         ...prevQuery,
         sort: config.sort,
@@ -976,32 +756,24 @@ const useModalQueryParams = (initialState) => {
     }
   }, [config]);
   const handleChangeFilters = (nextFilters) => {
-    if (nextFilters) {
-      trackUsage("didFilterMediaLibraryElements", {
-        location: "content-manager",
-        filter: Object.keys(nextFilters[nextFilters.length - 1])[0]
-      });
-      setQueryObject((prev) => ({ ...prev, page: 1, filters: { $and: 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: typeof pageSize === "string" ? parseInt(pageSize, 10) : pageSize,
-      page: 1
-    }));
+    setQueryObject((prev) => ({ ...prev, pageSize: parseInt(pageSize, 10), page: 1 }));
   };
   const handeChangePage = (page) => {
     setQueryObject((prev) => ({ ...prev, page }));
   };
   const handleChangeSort = (sort) => {
-    if (sort) {
-      trackUsage("didSortMediaLibraryElements", {
-        location: "content-manager",
-        sort
-      });
-      setQueryObject((prev) => ({ ...prev, sort }));
-    }
+    trackUsage("didSortMediaLibraryElements", {
+      location: "content-manager",
+      sort
+    });
+    setQueryObject((prev) => ({ ...prev, sort }));
   };
   const handleChangeSearch = (_q) => {
     if (_q) {
@@ -1090,6 +862,28 @@ 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();
@@ -1110,30 +904,33 @@ const editAssetRequest = (asset, file, signal, onProgress, post) => {
   }).then((res) => res.data);
 };
 const useEditAsset = () => {
-  const [progress, setProgress] = React.useState(0);
+  const [progress, setProgress] = 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 };
@@ -1155,9 +952,7 @@ 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,
@@ -1527,10 +1322,10 @@ const DialogHeader = () => {
 };
 const QUALITY = 1;
 const useCropImg = () => {
-  const cropperRef = React.useRef();
-  const [isCropping, setIsCropping] = React.useState(false);
-  const [size, setSize] = React.useState({ width: void 0, height: void 0 });
-  React.useEffect(() => {
+  const cropperRef = useRef();
+  const [isCropping, setIsCropping] = useState(false);
+  const [size, setSize] = useState({ width: void 0, height: void 0 });
+  useEffect(() => {
     return () => {
       if (cropperRef.current) {
         cropperRef.current.destroy();
@@ -1577,7 +1372,7 @@ const useCropImg = () => {
           resolve(
             new File([blob], name2, {
               type: mimeType,
-              lastModified: new Date(lastModifiedDate).getTime()
+              lastModifiedDate
             })
           );
         },
@@ -1614,7 +1409,7 @@ const uploadAsset = (asset, folderId, signal, onProgress, post) => {
   }).then((res) => res.data);
 };
 const useUpload = () => {
-  const [progress, setProgress] = React.useState(0);
+  const [progress, setProgress] = useState(0);
   const queryClient = useQueryClient();
   const abortController = new AbortController();
   const signal = abortController.signal;
@@ -1640,6 +1435,14 @@ 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 {
@@ -1751,26 +1554,23 @@ 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);
   };
@@ -2565,7 +2365,7 @@ const useBulkRemove = () => {
       });
     },
     onError(error) {
-      toggleNotification({ type: "danger", message: error?.message });
+      toggleNotification({ type: "danger", message: error.message });
     }
   });
   const remove = (...args) => mutation.mutateAsync(...args);
@@ -4009,6 +3809,35 @@ 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 = () => {
@@ -4055,7 +3884,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 = decodeURIComponent(filter[name2][filterType]);
+      const value = filter[name2][filterType];
       return prevFilter[name2]?.[filterType] !== value;
     });
     onRemoveFilter(nextFilters);
@@ -4066,13 +3895,6 @@ 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";
@@ -4280,8 +4102,7 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
   const handleSubmit = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    const encodedValue = encodeURIComponent(modifiedData.value);
-    if (encodedValue) {
+    if (modifiedData.value) {
       if (modifiedData.name === "mime") {
         const alreadyAppliedFilters = filters.filter((filter) => {
           return Object.keys(filter)[0] === "mime";
@@ -4363,10 +4184,10 @@ const FilterPopover = ({ displayedFilters: displayedFilters2, filters, onSubmit,
         return;
       }
       const hasFilter = filters.find((filter) => {
-        return filter[modifiedData.name] && filter[modifiedData.name]?.[modifiedData.filter] === encodedValue;
+        return filter[modifiedData.name] && filter[modifiedData.name]?.[modifiedData.filter] === modifiedData.value;
       }) !== void 0;
       if (!hasFilter) {
-        let filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: encodedValue } };
+        let filterToAdd = { [modifiedData.name]: { [modifiedData.filter]: modifiedData.value } };
         const nextFilters = [...filters, filterToAdd];
         onSubmit(nextFilters);
       }
@@ -4868,7 +4689,7 @@ const BrowseStep = ({
     isSelectable: isSelectable(singularTypes, asset?.mime),
     type: "asset"
   }));
-  const breadcrumbs = !isCurrentFolderLoading && getBreadcrumbDataCM(currentFolder);
+  const breadcrumbs = !isCurrentFolderLoading && getBreadcrumbDataML(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
@@ -4919,7 +4740,7 @@ const BrowseStep = ({
           }
         )
       ] }),
-      (assetCount > 0 || folderCount > 0 || isSearching) && /* @__PURE__ */ jsxs(Flex, { marginLeft: "auto", shrink: 0, gap: 2, children: [
+      (assetCount > 0 || folderCount > 0 || isSearching) && /* @__PURE__ */ jsxs(Flex, { marginLeft: "auto", shrink: 0, children: [
         /* @__PURE__ */ jsx(ActionContainer, { paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -5462,6 +5283,32 @@ 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;
 `;
@@ -5584,6 +5431,76 @@ 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);
@@ -6616,6 +6533,15 @@ 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) {
@@ -6627,7 +6553,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       permissions: PERMISSIONS.main,
-      Component: () => import("./index-CgbGZ1U3.mjs"),
+      Component: () => import("./index-p2ufusDD.mjs"),
       position: 4
     });
     app.addSettingsLink("global", {
@@ -6637,7 +6563,7 @@ const index = {
         defaultMessage: "Media Library"
       },
       to: "media-library",
-      Component: () => import("./index-CIZ1_7yU.mjs"),
+      Component: () => import("./index-D0UI77ZE.mjs"),
       permissions: PERMISSIONS.settings
     });
     app.addFields({ type: "media", Component: MediaLibraryInput });
@@ -6708,4 +6634,4 @@ export {
   FolderCardBodyAction as y,
   AssetGridList as z
 };
-//# sourceMappingURL=index-Bg-hWXGc.mjs.map
+//# sourceMappingURL=index-DKKpjnQN.mjs.map