mirror of
https://github.com/strapi/strapi.git
synced 2025-09-11 01:26:42 +00:00
Check for file type
This commit is contained in:
parent
9ff491ebf1
commit
a06441cd53
@ -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>
|
||||||
|
@ -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 });
|
||||||
|
Loading…
x
Reference in New Issue
Block a user