diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js
index dbc673b9ef..0cb988ee78 100644
--- a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js
@@ -7,17 +7,96 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { get, isEmpty, isObject } from 'lodash';
import cn from 'classnames';
import styles from './styles.scss';
-function ImgPreview(props) {
- return (
-
- );
+class ImgPreview extends React.Component {
+ state = { imgURL: '', position: 0 };
+
+ componentDidMount() {
+ this.setState({
+ imgURL: get(this.props.files, ['0', 'url']),
+ });
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.isUploading !== this.props.isUploading) {
+ const lastFile = nextProps.files.slice(-1)[0];
+
+ this.generateImgURL(lastFile);
+ this.setState({ position: nextProps.files.length - 1 });
+ }
+ }
+
+ /**
+ * [generateImgURL description]
+ * @param {FileList} files
+ * @return {URL}
+ */
+ generateImgURL = (file) => {
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ this.setState({
+ imgURL: reader.result
+ });
+ }
+
+ reader.readAsDataURL(file);
+ }
+
+ handleClick = (operator) => {
+ const { position } = this.state;
+ const { files } = this.props;
+ let file;
+ let nextPosition;
+
+ switch (operator) {
+ case '+':
+ file = files[position + 1] || files[0];
+ nextPosition = files[position + 1] ? position + 1 : 0;
+ break;
+ case '-':
+ file = files[position - 1] || files[files.length - 1];
+ nextPosition = files[position - 1] ? position - 1 : files.length - 1;
+ break;
+ default:
+ // Do nothing
+ }
+
+ if (!file.url) {
+ this.generateImgURL(file)
+ } else {
+ this.setState({ imgURL: file.url });
+ }
+
+ this.setState({ position: nextPosition });
+ }
+
+ render() {
+ return (
+
+

+
+
+
+ );
+ }
}
-ImgPreview.defaultProps = {};
-ImgPreview.propTypes = {};
+ImgPreview.defaultProps = {
+ files: [{}],
+ isUploading: false,
+};
+
+ImgPreview.propTypes = {
+ files: PropTypes.array,
+ isUploading: PropTypes.bool,
+};
export default ImgPreview;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js b/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js
index be3b42c78d..10f961748b 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js
@@ -7,20 +7,72 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
+import { cloneDeep, isArray, isObject, isEmpty, last } from 'lodash';
import cn from 'classnames';
import ImgPreview from 'components/ImgPreview';
import styles from './styles.scss';
-function InputFile(props) {
- return (
-
- );
+class InputFile extends React.Component {
+ state = { isUploading: false };
+
+ handleChange = (e) => {
+ const value = Object.keys(e.target.files).reduce((acc, current) => {
+ acc.push(e.target.files[current]);
+
+ return acc;
+ }, cloneDeep(this.props.value));
+
+ this.setState({ isUploading: !this.state.isUploading });
+
+ const target = {
+ name: this.props.name,
+ type: 'file',
+ value,
+ };
+ this.props.onChange({ target });
+ }
+
+ render() {
+ const {
+ multiple,
+ name,
+ onChange,
+ value,
+ } = this.props;
+
+ return (
+
+ );
+ }
}
-InputFile.defaultProps = {};
-InputFile.propTypes = {};
+InputFile.defaultProps = {
+ multiple: true,
+ value: [],
+};
+
+InputFile.propTypes = {
+ multiple: PropTypes.bool,
+ name: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.object,
+ PropTypes.array,
+ ]),
+};
export default InputFile;
diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
index e55bfef860..4d5f5811e8 100755
--- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
@@ -11,6 +11,7 @@ import { createStructuredSelector } from 'reselect';
import { injectIntl } from 'react-intl';
import { bindActionCreators, compose } from 'redux';
+import InputFile from 'components/InputFile';
import injectReducer from 'utils/injectReducer';
import injectSaga from 'utils/injectSaga';
@@ -24,9 +25,20 @@ import reducer from './reducer';
import saga from './saga';
export class HomePage extends React.Component {
+ state = { value: [{ url: 'https://sofiaglobe.com/wp-content/uploads/2017/08/Toto-1979.jpg' }] };
+
+ onChange = ({ target }) => {
+ this.setState({ value: target.value });
+ }
+
render() {
return (
+
);
}
diff --git a/packages/strapi-plugin-upload/package.json b/packages/strapi-plugin-upload/package.json
index 06caba8f5e..402748fccc 100644
--- a/packages/strapi-plugin-upload/package.json
+++ b/packages/strapi-plugin-upload/package.json
@@ -1,6 +1,6 @@
{
"name": "strapi-plugin-upload",
- "version": "3.0.0-alpha.9.2",
+ "version": "3.0.0-alpha.9.3",
"description": "This is the description of the plugin.",
"strapi": {
"name": "upload",
@@ -24,7 +24,7 @@
},
"dependencies": {},
"devDependencies": {
- "strapi-helper-plugin": "3.0.0-alpha.9.2"
+ "strapi-helper-plugin": "3.0.0-alpha.9.3"
},
"author": {
"name": "A Strapi developer",