diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/IconUpload.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/IconUpload.js
deleted file mode 100644
index e30f684049..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/IconUpload.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-
-const IconUpload = () => {
- return (
-
- );
-};
-
-export default IconUpload;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/Wrapper.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/Wrapper.js
deleted file mode 100644
index b459a8e570..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/Wrapper.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
- position: relative;
- width: 100%;
- height: 162px;
- z-index: 1 !important;
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
- text-align: center;
- vertical-align: middle;
- background-color: #333740;
- background-position: center;
- background-repeat: no-repeat !important;
- white-space: nowrap;
-
- > img {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- margin: auto;
- max-width: 100%;
- max-height: 100%;
- z-index: 3;
- }
-
- .fileIcon {
- display: flex;
- flex-direction: column;
- height: 100%;
- color: #fff;
- justify-content: space-around;
- font-size: 30px;
- svg {
- margin: auto;
- }
- }
-
- .overlay {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- height: 162px;
- z-index: 999;
- background: #333740;
- opacity: 0.9;
- }
-`;
-
-export default Wrapper;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js
deleted file mode 100644
index c5c52648b0..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js
+++ /dev/null
@@ -1,250 +0,0 @@
-/**
- *
- *
- * ImgPreview
- *
- */
-
-/* eslint-disable no-console */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { get, has, isArray, isEmpty, startsWith, size } from 'lodash';
-import cn from 'classnames';
-
-import ImgPreviewArrow from '../ImgPreviewArrow';
-import ImgPreviewHint from '../ImgPreviewHint';
-import IconUpload from './IconUpload';
-import Wrapper from './Wrapper';
-
-/* eslint-disable react/no-unused-state */
-class ImgPreview extends React.Component {
- state = {
- imgURL: '',
- isDraging: false,
- isOver: false,
- isOverArrow: false,
- isImg: false,
- isInitValue: false,
- };
-
- componentDidMount() {
- // We don't need the generateImgURL function here since the compo will
- // always have an init value here
- const file = this.props.multiple
- ? get(this.props.files, ['0', 'name'], '')
- : get(this.props.files, 'name');
- this.setState({
- imgURL:
- get(this.props.files, ['0', 'url'], '') ||
- get(this.props.files, 'url', ''),
- isImg: this.isPictureType(file),
- });
- }
-
- UNSAFE_componentWillReceiveProps(nextProps) {
- if (nextProps.isUploading !== this.props.isUploading) {
- const lastFile = this.props.multiple
- ? nextProps.files.slice(-1)[0]
- : nextProps.files[0] || nextProps.files;
- this.generateImgURL(lastFile);
-
- if (this.props.multiple) {
- this.updateFilePosition(nextProps.files.length - 1);
- }
- }
- // Update the preview or slide pictures or init the component
- if (
- nextProps.didDeleteFile !== this.props.didDeleteFile ||
- nextProps.position !== this.props.position ||
- (size(nextProps.files) !== size(this.props.files) &&
- !this.state.isInitValue)
- ) {
- const file = nextProps.files[nextProps.position] || nextProps.files || '';
- this.generateImgURL(file);
-
- if (!this.state.isInitValue) {
- this.setState({ isInitValue: true });
- }
- }
-
- if (isEmpty(nextProps.files)) {
- this.setState({ isImg: false, imgURL: null });
- }
- }
-
- componentDidCatch(error, info) {
- console.log('An error occured in ImgPreview', info);
- }
-
- getFileType = fileName => fileName.split('.').slice(-1)[0];
-
- /**
- * [generateImgURL description]
- * @param {FileList} files
- * @return {URL}
- */
- generateImgURL = file => {
- if (this.isPictureType(file.name) && !has(file, 'url')) {
- const reader = new FileReader();
- reader.onloadend = () => {
- this.setState({
- imgURL: reader.result,
- isImg: true,
- });
- };
-
- reader.readAsDataURL(file);
- } else if (has(file, 'url')) {
- const isImg = this.isPictureType(file.name);
- const imgURL =
- file.url[0] === '/' ? `${strapi.backendURL}${file.url}` : file.url;
-
- this.setState({ isImg, imgURL });
- } else {
- this.setState({ isImg: false, imgURL: file.name });
- }
- };
-
- handleClick = type => {
- const { files, position } = this.props;
- let file; // eslint-disable-line no-unused-vars
- let nextPosition;
-
- switch (type) {
- case 'right':
- file = files[position + 1] || files[0];
- nextPosition = files[position + 1] ? position + 1 : 0;
- break;
- case 'left':
- file = files[position - 1] || files[files.length - 1];
- nextPosition = files[position - 1] ? position - 1 : files.length - 1;
- break;
- default:
- // Do nothing
- }
-
- // Update the parent position
- this.updateFilePosition(nextPosition);
- };
-
- handleDragEnter = e => {
- e.preventDefault();
- e.stopPropagation();
- this.setState({ isDraging: true });
- };
-
- handleDragLeave = e => {
- e.preventDefault();
- e.stopPropagation();
- this.setState({ isDraging: false });
- };
-
- handleDragOver = e => {
- e.preventDefault();
- e.stopPropagation();
- };
-
- handleDrop = e => {
- this.setState({ isDraging: false });
- this.props.onDrop(e);
- };
-
- // TODO change logic to depend on the type
- isPictureType = fileName => /\.(jpe?g|png|gif)$/i.test(fileName);
-
- updateFilePosition = newPosition => {
- this.props.updateFilePosition(newPosition);
- };
-
- renderContent = () => {
- const fileType = this.getFileType(this.state.imgURL);
-
- if (this.state.isImg) {
- const imgURL = startsWith(this.state.imgURL, '/')
- ? `${strapi.backendURL}${this.state.imgURL}`
- : this.state.imgURL;
-
- return 
;
- }
-
- return (
-
-
-
- );
- };
-
- render() {
- const { files, onBrowseClick } = this.props;
- const { imgURL } = this.state;
-
- const containerStyle = isEmpty(imgURL)
- ? {
- display: 'flex',
- zIndex: 9999,
- }
- : {};
-
- return (
-
- {isEmpty(imgURL) && }
-
-
- {!isEmpty(imgURL) && this.renderContent()}
- 1}
- onClick={this.handleClick}
- onMouseEnter={() => this.setState({ isOverArrow: true })}
- onMouseLeave={() => this.setState({ isOverArrow: false })}
- show={isArray(files) && size(files) > 1}
- type="right"
- />
- 1}
- onClick={this.handleClick}
- onMouseEnter={() => this.setState({ isOverArrow: true })}
- onMouseLeave={() => this.setState({ isOverArrow: false })}
- show={isArray(files) && size(files) > 1}
- />
-
- );
- }
-}
-
-ImgPreview.defaultProps = {
- didDeleteFile: false,
- files: [],
- isUploading: false,
- multiple: false,
- onBrowseClick: () => {},
- onDrop: () => {},
- position: 0,
- updateFilePosition: () => {},
-};
-
-ImgPreview.propTypes = {
- didDeleteFile: PropTypes.bool,
- files: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
- isUploading: PropTypes.bool,
- multiple: PropTypes.bool,
- onBrowseClick: PropTypes.func,
- onDrop: PropTypes.func,
- position: PropTypes.number,
- updateFilePosition: PropTypes.func,
-};
-
-export default ImgPreview;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewArrow/Wrapper.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreviewArrow/Wrapper.js
deleted file mode 100644
index 909ece69e7..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewArrow/Wrapper.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled, { css } from 'styled-components';
-
-const Wrapper = styled.div`
- position: absolute;
- top: 56px;
- height: 32px;
- width: 28px;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 2px;
- text-align: center;
- color: #fff;
- cursor: pointer;
- z-index: 99;
-
- ${({ type }) => {
- if (type === 'left') {
- return css`
- left: 0;
- &:before {
- content: '\f104';
- vertical-align: middle;
- text-align: center;
- font-family: 'FontAwesome';
- font-size: 20px;
- font-weight: 800;
- }
- `;
- }
-
- return css`
- right: 0;
- &:before {
- content: '\f105';
- vertical-align: middle;
- text-align: center;
- font-family: 'FontAwesome';
- font-size: 20px;
- font-weight: 800;
- }
- `;
- }}
-`;
-
-export default Wrapper;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewArrow/index.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreviewArrow/index.js
deleted file mode 100644
index 864b66b84b..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewArrow/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- *
- * ImgPreviewArrow
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import Wrapper from './Wrapper';
-
-function ImgPreviewArrow(props) {
- let divStyle = props.show ? {} : { display: 'none' };
-
- if (props.enable) {
- divStyle = { zIndex: 99999 };
- }
-
- return (
- {
- e.preventDefault();
- e.stopPropagation();
- props.onClick(props.type);
- }}
- onMouseEnter={props.onMouseEnter}
- onMouseLeave={props.onMouseLeave}
- />
- );
-}
-
-ImgPreviewArrow.defaultProps = {
- enable: false,
- onClick: () => {},
- onMouseEnter: () => {},
- onMouseLeave: () => {},
- show: false,
- type: 'left',
-};
-
-ImgPreviewArrow.propTypes = {
- enable: PropTypes.bool,
- onClick: PropTypes.func,
- onMouseEnter: PropTypes.func,
- onMouseLeave: PropTypes.func,
- show: PropTypes.bool,
- type: PropTypes.string,
-};
-
-export default ImgPreviewArrow;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/P.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/P.js
deleted file mode 100644
index 7830859249..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/P.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-const P = styled.p`
- position: absolute;
- top: 52px;
- display: block;
- width: 100%;
- padding: 12px 75px 0 75px;
- white-space: pre-line;
- color: #333740;
- line-height: 18px;
- font-size: 13px;
- > span {
- display: block;
- > u {
- cursor: pointer;
- }
- }
-`;
-
-export default P;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/index.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/index.js
deleted file mode 100644
index a1b5d6c047..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewHint/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- *
- * ImgPreviewHint
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import P from './P';
-
-function ImgPreviewHint(props) {
- let pStyle;
-
- switch (true) {
- case props.showWhiteHint:
- pStyle = { zIndex: 999, color: '#fff' };
- break;
- case props.displayHint:
- pStyle = { zIndex: 4 };
- break;
- default:
- pStyle = { display: 'none' };
- }
-
- const browse = (
-
- {message => {message}}
-
- );
-
- return (
- e.stopPropagation()}
- onDrop={props.onDrop}
- >
-
-
- );
-}
-
-ImgPreviewHint.defaultProps = {
- displayHint: false,
- onClick: () => {},
- onDrop: () => {},
- showWhiteHint: false,
-};
-
-ImgPreviewHint.propTypes = {
- displayHint: PropTypes.bool,
- onClick: PropTypes.func,
- onDrop: PropTypes.func,
- showWhiteHint: PropTypes.bool,
-};
-
-export default ImgPreviewHint;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewRemoveIcon/Div.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreviewRemoveIcon/Div.js
deleted file mode 100644
index f1e58711a9..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewRemoveIcon/Div.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const Div = styled.div`
- position: absolute;
- top: 5px;
- right: 3px;
- width: 20px;
- height: 20px;
- z-index: 999;
- color: #fff;
- font-size: 11px;
- cursor: pointer;
-`;
-
-export default Div;
diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewRemoveIcon/index.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreviewRemoveIcon/index.js
deleted file mode 100644
index d6602a8537..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreviewRemoveIcon/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- *
- * ImgPreviewRemoveIcon
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Div from './Div';
-
-function ImgPreviewRemoveIcon(props) {
- const divStyle = props.show ? {} : { display: 'none' };
-
- return (
-
-
-
- );
-}
-
-ImgPreviewRemoveIcon.defaultProps = {
- onClick: () => {},
- show: false,
-};
-
-ImgPreviewRemoveIcon.propTypes = {
- onClick: PropTypes.func,
- show: PropTypes.bool,
-};
-
-export default ImgPreviewRemoveIcon;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFile/Wrapper.js b/packages/strapi-helper-plugin/lib/src/components/InputFile/Wrapper.js
deleted file mode 100644
index 5db3244dba..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/InputFile/Wrapper.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
- .inputFile {
- overflow: hidden;
- position: absolute;
- z-index: -1;
- opacity: 0;
- }
-
- .buttonContainer {
- width: 100%;
- height: 34px;
- line-height: 34px;
- text-align: center;
- background-color: #fafafb;
- border-top: 0;
- border-bottom-left-radius: 2px;
- border-bottom-right-radius: 2px;
- color: #333740;
- font-size: 12px;
- font-weight: 700;
- -webkit-font-smoothing: antialiased;
-
- cursor: pointer;
- text-transform: uppercase;
- > i,
- > svg {
- margin-right: 10px;
- }
- }
-
- .copy {
- cursor: copy !important;
- }
-
- .inputFileControlForm {
- padding: 0;
- height: auto;
- }
-`;
-
-export default Wrapper;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js b/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js
deleted file mode 100644
index deaf479c6f..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- *
- *
- * InputFile
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { cloneDeep, isArray, isObject } from 'lodash';
-import cn from 'classnames';
-
-import ImgPreview from '../ImgPreview';
-import InputFileDetails from '../InputFileDetails';
-import Wrapper from './Wrapper';
-
-/* eslint-disable react/jsx-handler-names */
-class InputFile extends React.Component {
- state = {
- didDeleteFile: false,
- isUploading: false,
- position: 0,
- };
-
- onDrop = e => {
- e.preventDefault();
- this.addFilesToProps(e.dataTransfer.files);
- };
-
- handleClick = e => {
- e.preventDefault();
- e.stopPropagation();
- this.inputFile.click();
- };
-
- handleChange = ({ target }) => this.addFilesToProps(target.files);
-
- addFilesToProps = files => {
- if (files.length === 0) {
- return;
- }
-
- const initAcc = this.props.multiple ? cloneDeep(this.props.value) : {};
- const value = Object.keys(files).reduce((acc, current) => {
- if (this.props.multiple) {
- acc.push(files[current]);
- } else if (current === '0') {
- acc[0] = files[0];
- }
-
- return acc;
- }, initAcc);
-
- const target = {
- name: this.props.name,
- type: 'file',
- value,
- };
-
- this.inputFile.value = '';
- this.setState({ isUploading: !this.state.isUploading });
- this.props.onChange({ target });
- };
-
- handleFileDelete = e => {
- e.preventDefault();
- e.stopPropagation();
-
- // Remove the file from props
- const value = this.props.multiple ? cloneDeep(this.props.value) : {};
-
- // Remove the file from the array if multiple files upload is enable
- if (this.props.multiple) {
- value.splice(this.state.position, 1);
- }
-
- // Update the parent's props
- const target = {
- name: this.props.name,
- type: 'file',
- value: Object.keys(value).length === 0 ? '' : value,
- };
-
- this.props.onChange({ target });
-
- // Update the position of the children
- if (this.props.multiple) {
- const newPosition = value.length === 0 ? 0 : value.length - 1;
- this.updateFilePosition(newPosition, value.length);
- }
- this.setState({ didDeleteFile: !this.state.didDeleteFile });
- };
-
- updateFilePosition = (newPosition, size = this.props.value.length) => {
- const label = size === 0 ? false : newPosition + 1;
- this.props.setLabel(label);
- this.setState({ position: newPosition });
- };
-
- isVisibleDetails = () => {
- const { value } = this.props;
-
- if (
- !value ||
- (isArray(value) && value.length === 0) ||
- (isObject(value) && Object.keys(value).length === 0)
- ) {
- return false;
- }
-
- return true;
- };
-
- render() {
- const { multiple, name, onChange, value } = this.props;
-
- return (
-
-
-
-
-
-
- {props.file.url && (
-
-
-
-
- )}
-
-
-
-
-