extension

Signed-off-by: Ky <virginie.ky@gmail.com>

packages/strapi-helper-plugin/lib/src/utils/getFileExtension.js

@@ -1,3 +1,3 @@
-const getFileExtension = mime => (mime ? mime.split(/[\s/]+/)[1] : 'undefined');
+const getFileExtension = ext => (ext ? ext.substr(1) : null);
 
 export default getFileExtension;

packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/index.js

@@ -33,8 +33,8 @@ function MediaPreviewList({ hoverable, files }) {
   };
 
   const renderFile = file => {
-    const { mime, name } = file;
+    const { ext, name } = file;
-    const fileExtension = getFileExtension(mime);
+    const fileExtension = getFileExtension(ext);
 
     return (
       <MediaPreviewFile className={hoverable ? 'hoverable' : ''}>

packages/strapi-plugin-upload/admin/src/components/Card/index.js

@@ -20,6 +20,7 @@ const Card = ({
   checked,
   children,
   errorMessage,
+  ext,
   hasError,
   height,
   mime,
@@ -37,6 +38,7 @@ const Card = ({
   const { formatMessage } = useGlobalContext();
   const fileSize = formatBytes(size, 0);
   const fileType = mime || type;
+  const extension = getFileExtension(ext) || name.split('.').slice(-1)[0] || null;
 
   const handleClick = () => {
     if (!isDisabled) {
@@ -51,6 +53,7 @@ const Card = ({
     >
       <CardImgWrapper checked={checked} small={small}>
         <CardPreview
+          extension={extension}
           hasError={hasError}
           previewUrl={previewUrl}
           url={url}
@@ -68,12 +71,7 @@ const Card = ({
             <Tag label={getType(fileType)} />
           </Flex>
           {!withoutFileInfo && (
-            <FileInfos
+            <FileInfos extension={extension} size={fileSize} width={width} height={height} />
-              extension={getFileExtension(fileType)}
-              size={fileSize}
-              width={width}
-              height={height}
-            />
           )}
         </>
       ) : (
@@ -89,6 +87,7 @@ Card.defaultProps = {
   checked: false,
   children: null,
   errorMessage: null,
+  ext: null,
   id: null,
   isDisabled: false,
   hasError: false,
@@ -112,6 +111,7 @@ Card.propTypes = {
   checked: PropTypes.bool,
   children: PropTypes.node,
   errorMessage: PropTypes.string,
+  ext: PropTypes.string,
   hasError: PropTypes.bool,
   height: PropTypes.number,
   mime: PropTypes.string,

packages/strapi-plugin-upload/admin/src/components/CardPreview/index.js

@@ -1,6 +1,5 @@
 import React, { memo, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { getFileExtension } from 'strapi-helper-plugin';
 
 import { getType } from '../../utils';
 
@@ -10,7 +9,7 @@ import VideoPreview from '../VideoPreview';
 import Wrapper from './Wrapper';
 import Image from './Image';
 
-const CardPreview = ({ hasError, hasIcon, url, previewUrl, type, withFileCaching }) => {
+const CardPreview = ({ extension, hasError, hasIcon, url, previewUrl, type, withFileCaching }) => {
   const isFile = getType(type) === 'file';
   const isVideo = getType(type) === 'video';
   const cacheRef = useRef(performance.now());
@@ -26,7 +25,7 @@ const CardPreview = ({ hasError, hasIcon, url, previewUrl, type, withFileCaching
   if (isFile) {
     return (
       <Wrapper isFile>
-        <FileIcon ext={getFileExtension(type)} />
+        <FileIcon ext={extension} />
       </Wrapper>
     );
   }
@@ -45,6 +44,7 @@ const CardPreview = ({ hasError, hasIcon, url, previewUrl, type, withFileCaching
 };
 
 CardPreview.defaultProps = {
+  extension: null,
   hasError: false,
   hasIcon: false,
   previewUrl: null,
@@ -54,6 +54,7 @@ CardPreview.defaultProps = {
 };
 
 CardPreview.propTypes = {
+  extension: PropTypes.string,
   hasError: PropTypes.bool,
   hasIcon: PropTypes.bool,
   previewUrl: PropTypes.string,

packages/strapi-plugin-upload/admin/src/components/SelectedAssets/DraggableCard.js

@@ -20,6 +20,7 @@ const DraggableCard = ({
   checked,
   children,
   errorMessage,
+  ext,
   hasError,
   index,
   isDraggable,
@@ -88,6 +89,7 @@ const DraggableCard = ({
     <Wrapper onClick={handleClick} isDraggable={isDraggable} ref={ref} style={{ opacity }}>
       <CardImgWrapper checked={checked} small>
         <CardPreview
+          extension={getFileExtension(ext)}
           hasError={hasError}
           url={url}
           type={fileType}
@@ -100,7 +102,7 @@ const DraggableCard = ({
         <Title>{name}</Title>
         <Tag label={getType(fileType)} />
       </Flex>
-      <FileInfos extension={getFileExtension(fileType)} size={fileSize} />
+      <FileInfos extension={getFileExtension(ext)} size={fileSize} />
       {hasError && <ErrorMessage>{errorMessage}</ErrorMessage>}
     </Wrapper>
   );
@@ -110,6 +112,7 @@ DraggableCard.defaultProps = {
   checked: false,
   children: null,
   errorMessage: null,
+  ext: null,
   id: null,
   index: 0,
   isDraggable: false,
@@ -129,6 +132,7 @@ DraggableCard.propTypes = {
   checked: PropTypes.bool,
   children: PropTypes.node,
   errorMessage: PropTypes.string,
+  ext: PropTypes.string,
   hasError: PropTypes.bool,
   index: PropTypes.number,
   isDraggable: PropTypes.bool,