Merge pull request Expensify#15037 from Ollyws/issue-13038

Fix for: Figure out why svg images don't show immediately when uploading as avatar
guluarte · Feb 14, 2023 · 1a5249d · 1a5249d
2 parents e31cb53 + ceab0f6
commit 1a5249d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -28,7 +28,7 @@ const CONST = {
 
     AVATAR_MAX_ATTACHMENT_SIZE: 6291456,
 
-    AVATAR_ALLOWED_EXTENSIONS: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
+    AVATAR_ALLOWED_EXTENSIONS: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'],
 
     // Minimum width and height size in px for a selected image
     AVATAR_MIN_WIDTH_PX: 80,

diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -270,10 +270,16 @@ const AvatarCropModal = (props) => {
             height: size, width: size, originX, originY,
         };
 
+        // Svg images are converted to a png blob to preserve transparency, so we need to update the
+        // image name and type accordingly.
+        const isSvg = props.imageType.includes('image/svg');
+        const imageName = isSvg ? 'fileName.png' : props.imageName;
+        const imageType = isSvg ? 'image/png' : props.imageType;
+
         cropOrRotateImage(
             props.imageUri,
             [{rotate: rotation.value % 360}, {crop}],
-            {compress: 1, name: props.imageName, type: props.imageType},
+            {compress: 1, name: imageName, type: imageType},
         )
             .then((newImage) => {
                 props.onClose();