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 e32001ebd3..d6435d3b88 100644 --- a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js @@ -20,33 +20,39 @@ class ImgPreview extends React.Component { // always have an init value here this.setState({ imgURL: get(this.props.files, ['0', 'url'], ''), + isImg: this.isPictureType(get(this.props.files, ['0', 'name'], '')), }); } componentWillReceiveProps(nextProps) { if (nextProps.isUploading !== this.props.isUploading) { const lastFile = nextProps.files.slice(-1)[0]; - this.generateImgURL(lastFile); this.updateFilePosition(nextProps.files.length - 1); - // this.setState({ position: nextProps.files.length - 1 }); } } + getFileType = (fileName) => fileName.split('.').slice(-1)[0]; + /** * [generateImgURL description] * @param {FileList} files * @return {URL} */ generateImgURL = (file) => { - const reader = new FileReader(); - reader.onloadend = () => { - this.setState({ - imgURL: reader.result - }); - } + if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { + const reader = new FileReader(); + reader.onloadend = () => { + this.setState({ + imgURL: reader.result, + isImg: true, + }); + } - reader.readAsDataURL(file); + reader.readAsDataURL(file); + } else { + this.setState({ isImg: false, imgURL: file.name }); + } } handleClick = (type) => { @@ -74,10 +80,11 @@ class ImgPreview extends React.Component { this.setState({ imgURL: file.url }); } - // this.setState({ position: nextPosition }); this.updateFilePosition(nextPosition); } + isPictureType = (fileName) => /\.(jpe?g|png|gif)$/i.test(fileName); + removeFile = (e) => { e.preventDefault(); e.stopPropagation(); @@ -103,8 +110,6 @@ class ImgPreview extends React.Component { const nextPosition = value.length -1; this.updateFilePosition(nextPosition); - // this.setState({ position: nextPosition }); - // this.props.updateFilePosition(nextPosition); if (!nextFile.url) { this.generateImgURL(nextFile); @@ -141,13 +146,11 @@ class ImgPreview extends React.Component { render() { const { files, multiple } = this.props; - console.log(this.state.imgURL); - // TODO handle logo Img - // { isEmpty(files) &&