diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index fe893d63e451..6128648ca0bc 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -37,6 +37,9 @@ const propTypes = { /** Name of the image */ imageName: PropTypes.string, + /** Type of the image file */ + imageType: PropTypes.string, + /** Callback to be called when user closes the modal */ onClose: PropTypes.func, @@ -53,6 +56,7 @@ const propTypes = { const defaultProps = { imageUri: '', imageName: '', + imageType: '', onClose: () => {}, onSave: () => {}, }; @@ -265,12 +269,16 @@ const AvatarCropModal = (props) => { height: size, width: size, originX, originY, }; - cropOrRotateImage(props.imageUri, [{rotate: rotation.value % 360}, {crop}], {compress: 1, name: props.imageName}) + cropOrRotateImage( + props.imageUri, + [{rotate: rotation.value % 360}, {crop}], + {compress: 1, name: props.imageName, type: props.imageType}, + ) .then((newImage) => { props.onClose(); props.onSave(newImage); }); - }, [props.imageUri, props.imageName, imageContainerSize]); + }, [props.imageUri, props.imageName, props.imageType, imageContainerSize]); /** * @param {Event} event diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 3de205fd6717..a9f6fc360da4 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -90,6 +90,7 @@ class AvatarWithImagePicker extends React.Component { isAvatarCropModalOpen: false, imageName: '', imageUri: '', + imageType: '', }; } @@ -194,7 +195,12 @@ class AvatarWithImagePicker extends React.Component { return; } - this.setState({isAvatarCropModalOpen: true, imageUri: image.uri, imageName: image.name}); + this.setState({ + isAvatarCropModalOpen: true, + imageUri: image.uri, + imageName: image.name, + imageType: image.type, + }); }); } @@ -297,6 +303,7 @@ class AvatarWithImagePicker extends React.Component { onSave={this.props.onImageSelected} imageUri={this.state.imageUri} imageName={this.state.imageName} + imageType={this.state.imageType} /> ); diff --git a/src/libs/cropOrRotateImage/index.js b/src/libs/cropOrRotateImage/index.js index 7ff52346e6a7..295003babdfd 100644 --- a/src/libs/cropOrRotateImage/index.js +++ b/src/libs/cropOrRotateImage/index.js @@ -89,7 +89,7 @@ function cropCanvas(canvas, options) { function convertCanvasToFile(canvas, options = {}) { return new Promise((resolve) => { canvas.toBlob((blob) => { - const file = new File([blob], `${options.name || 'fileName'}.jpg`, {type: 'image/jpeg'}); + const file = new File([blob], options.name || 'fileName.jpeg', {type: options.type || 'image/jpeg'}); file.uri = URL.createObjectURL(file); resolve(file); }); diff --git a/src/libs/cropOrRotateImage/index.native.js b/src/libs/cropOrRotateImage/index.native.js index a381978ec57a..b161cc27ebb5 100644 --- a/src/libs/cropOrRotateImage/index.native.js +++ b/src/libs/cropOrRotateImage/index.native.js @@ -14,7 +14,7 @@ function cropOrRotateImage(uri, actions, options = {}) { RNImageManipulator.manipulate(uri, actions, options).then((result) => { RNFetchBlob.fs.stat(result.uri.replace('file://', '')).then(({size}) => { resolve({ - ...result, size, type: 'image/png', name: `${options.name || 'fileName'}.jpg`, + ...result, size, type: options.type || 'image/jpeg', name: options.name || 'fileName.jpg', }); }); });