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