diff --git a/packages/strapi-plugin-upload/admin/src/components/Card/Border.js b/packages/strapi-plugin-upload/admin/src/components/Card/Border.js
new file mode 100644
index 0000000000..54314880c1
--- /dev/null
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/Border.js
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Border = styled.div`
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: none;
+ border: 2px solid #007eff;
+ ${({ checked }) => checked && 'display: block;'}
+`;
+
+Border.defaultProps = {
+ checked: false,
+};
+
+Border.propTypes = {
+ checked: PropTypes.bool,
+};
+
+export default Border;
diff --git a/packages/strapi-plugin-upload/admin/src/components/Card/index.js b/packages/strapi-plugin-upload/admin/src/components/Card/index.js
index a715d21cea..9a5a325589 100644
--- a/packages/strapi-plugin-upload/admin/src/components/Card/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/index.js
@@ -6,8 +6,8 @@ import CardImgWrapper from '../CardImgWrapper';
import CardPreview from '../CardPreview';
import Wrapper from './Wrapper';
import Title from './Title';
+import Border from './Border';
-// TODO - adapt with the real data
const Card = ({
checked,
children,
@@ -15,7 +15,6 @@ const Card = ({
hasError,
mime,
name,
- onChange,
small,
size,
type,
@@ -26,6 +25,7 @@ const Card = ({
+
{children}
@@ -41,9 +41,10 @@ const Card = ({
Card.defaultProps = {
checked: false,
children: null,
+ errorMessage: null,
hasError: false,
+ mime: null,
name: null,
- onChange: () => {},
size: 0,
small: false,
type: null,
@@ -53,9 +54,10 @@ Card.defaultProps = {
Card.propTypes = {
checked: PropTypes.bool,
children: PropTypes.node,
+ errorMessage: PropTypes.string,
hasError: PropTypes.bool,
+ mime: PropTypes.string,
name: PropTypes.string,
- onChange: PropTypes.func,
size: PropTypes.number,
small: PropTypes.bool,
type: PropTypes.string,
diff --git a/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js b/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js
index 7d797c2e79..9eb3773520 100644
--- a/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js
@@ -8,8 +8,7 @@ const Wrapper = styled.div`
align-items: center;
width: 24px;
height: 24px;
- margin-left: auto;
- margin-right: 5px;
+ margin-left: 5px;
background-color: ${({ theme }) => theme.main.colors.white};
border: 1px solid #e3e9f3;
border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
diff --git a/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js b/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js
index 4d4a114600..63e74ad50b 100644
--- a/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js
@@ -1,10 +1,22 @@
import styled from 'styled-components';
+import PropTypes from 'prop-types';
const CardControlsWrapper = styled.div`
- position: absolute;
- top: 10px;
- right: 5px;
display: flex;
+ position: absolute;
+ top: 0;
+ ${({ leftAlign }) => (leftAlign ? 'left: 0;' : 'right: 0;')};
+ width: fit-content;
+ height: auto;
+ margin: 10px;
`;
+CardControlsWrapper.defaultProps = {
+ leftAlign: false,
+};
+
+CardControlsWrapper.propTypes = {
+ leftAlign: PropTypes.bool,
+};
+
export default CardControlsWrapper;
diff --git a/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js b/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
index e90687f2ac..f9f91abe27 100644
--- a/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
@@ -12,12 +12,6 @@ const CardImgWrapper = styled.div`
.card-control-wrapper {
display: none;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- padding: 10px;
}
&:hover {
@@ -44,7 +38,6 @@ const CardImgWrapper = styled.div`
.card-control-wrapper {
display: flex;
z-index: 1050;
- border: 2px solid #007EFF;
}
`}
`;
diff --git a/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js b/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js
index 38d363377e..4f841e1098 100644
--- a/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js
@@ -9,6 +9,9 @@ const FileWrapper = styled(CardImgWrapper)`
width: 100%;
object-fit: contain;
margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
}
.cropper-view-box {
diff --git a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js b/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js
index 925d736422..a49f3d824d 100644
--- a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js
+++ b/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js
@@ -1,5 +1,4 @@
import styled from 'styled-components';
-import { themePropTypes } from 'strapi-helper-plugin';
const Container = styled.div`
width: 44%;
diff --git a/packages/strapi-plugin-upload/admin/src/components/List/index.js b/packages/strapi-plugin-upload/admin/src/components/List/index.js
index 91d1d41a6d..0c2b813f91 100644
--- a/packages/strapi-plugin-upload/admin/src/components/List/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/List/index.js
@@ -5,6 +5,7 @@ import { Checkbox } from '@buffetjs/core';
import createMatrix from '../../utils/createMatrix';
import Card from '../Card';
+import CardControlsWrapper from '../CardControlsWrapper';
import Wrapper from './Wrapper';
const List = ({ data, onChange, selectedItems }) => {
@@ -22,9 +23,9 @@ const List = ({ data, onChange, selectedItems }) => {
return (
);
diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
index 5c2e478346..02a01742fb 100644
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import Card from '../Card';
import CardControl from '../CardControl';
import CardControlsWrapper from '../CardControlsWrapper';
-import CardImgWrapper from '../CardImgWrapper';
import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';
const RowItem = ({
diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js
index b2bf55c475..fcff2ec1de 100644
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
import { Button } from '@buffetjs/core';
import createMatrix from '../../utils/createMatrix';
import getTrad from '../../utils/getTrad';