Check for file type

This commit is contained in:
cyril lopez 2018-02-12 18:46:45 +01:00
parent 9ff491ebf1
commit a06441cd53
2 changed files with 20 additions and 17 deletions

View File

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

View File

@ -25,7 +25,7 @@ import reducer from './reducer';
import saga from './saga'; import saga from './saga';
export class HomePage extends React.Component { export class HomePage extends React.Component {
state = { value: [{ url: 'https://sofiaglobe.com/wp-content/uploads/2017/08/Toto-1979.jpg' }] }; state = { value: [{ url: 'https://sofiaglobe.com/wp-content/uploads/2017/08/Toto-1979.jpg', name: 'https://sofiaglobe.com/wp-content/uploads/2017/08/Toto-1979.jpg' }] };
onChange = ({ target }) => { onChange = ({ target }) => {
this.setState({ value: target.value }); this.setState({ value: target.value });