Init Inputfile component

Handle preview for both existing files and uploaded ones

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 (
-    <div></div>
-  );
+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 (
+      <div>
+        <img src={this.state.imgURL} />
+        <button className="btn btn-primary" onClick={() => this.handleClick('+')}>
+          +
+        </button>
+        <button className="btn btn-primary" onClick={() => this.handleClick('-')}>
+          -
+        </button>
+      </div>
+    );
+  }
 }
 
-ImgPreview.defaultProps = {};
-ImgPreview.propTypes = {};
+ImgPreview.defaultProps = {
+  files: [{}],
+  isUploading: false,
+};
+
+ImgPreview.propTypes = {
+  files: PropTypes.array,
+  isUploading: PropTypes.bool,
+};
 
 export default ImgPreview;

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 (
-    <div></div>
-  );
+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 (
+      <div>
+        <ImgPreview
+          files={value}
+          isUploading={this.state.isUploading}
+        />
+        <input
+          multiple={multiple}
+          name={name}
+          onChange={this.handleChange}
+          type="file"
+        />
+      </div>
+    );
+  }
 }
 
-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;

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 (
       <div className={styles.homePage}>
+        <InputFile
+          name="test"
+          value={this.state.value}
+          onChange={this.onChange}
+        />
       </div>
     );
   }

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",