diff --git a/src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx b/src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx index d147282733..dfeb6cace0 100644 --- a/src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx +++ b/src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx @@ -25,6 +25,7 @@ export default class ImageInput extends React.Component { this.state = { newBasicInfo: {}, isImageOversize: false, + isImageFile: true, }; } @@ -72,6 +73,13 @@ export default class ImageInput extends React.Component { if (file === undefined) { return; } + const allowedTypes = ['image/png', 'image/jpg', 'image/jpeg']; + if (!allowedTypes.includes(file.type)) { + this.setState({ + isImageFile: false, + }); + return; + } if (file.size > 2 * 1024 * 1024) { // If file size is greater than 2 MB, show error message this.setState({ @@ -81,6 +89,7 @@ export default class ImageInput extends React.Component { } this.setState({ isImageOversize: false, + isImageFile: true, }); uploadPhotoInit(); loadImage.parseMetaData(file, (data) => { @@ -126,7 +135,7 @@ export default class ImageInput extends React.Component { deletingPhoto, } = profileState; - const { newBasicInfo, isImageOversize } = this.state; + const { newBasicInfo, isImageOversize, isImageFile } = this.state; return (
@@ -157,7 +166,8 @@ export default class ImageInput extends React.Component {
- {isImageOversize &&
Please select an image smaller than 2MB
} + {!isImageFile &&
Please select jpg, jpeg or png image files only
} + {isImageFile && isImageOversize &&
Please select an image smaller than 2MB
} ); }