From 2f7a84115cc5628ed16fd56ba099fc6dbaf7d5b6 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Wed, 2 Sep 2020 05:11:14 -0700
Subject: [PATCH] Fix image rendering

Summary:
Images in the network plugin are rarely displayed in the network plugin, as it tries to use the public url to preview it. However, that won't if the endpoint is behind authentication, idempotent, etc. This diff changes the behavior to instead send the network body to flipper and use that to preview.

Changelog: [Network] Fixed image preview

Reviewed By: jknoxville, passy

Differential Revision: D23370743

fbshipit-source-id: 0070e9e38c10a5761b9f7190467e26f01a7b2471
---
 .../plugins/network/NetworkFlipperPlugin.java     |  4 +---
 desktop/plugins/network/RequestDetails.tsx        | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkFlipperPlugin.java b/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkFlipperPlugin.java
index 6b78c9a2b..0a9ada40c 100644
--- a/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkFlipperPlugin.java
+++ b/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkFlipperPlugin.java
@@ -148,8 +148,6 @@ public class NetworkFlipperPlugin extends BufferingFlipperPlugin implements Netw
       return false;
     }
 
-    return contentType.value.contains("image/")
-        || contentType.value.contains("video/")
-        || contentType.value.contains("application/zip");
+    return contentType.value.contains("video/") || contentType.value.contains("application/zip");
   }
 }
diff --git a/desktop/plugins/network/RequestDetails.tsx b/desktop/plugins/network/RequestDetails.tsx
index 50d0d79aa..4fe34e155 100644
--- a/desktop/plugins/network/RequestDetails.tsx
+++ b/desktop/plugins/network/RequestDetails.tsx
@@ -478,8 +478,17 @@ class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
 
 class ImageFormatter {
   formatResponse = (request: Request, response: Response) => {
-    if (getHeaderValue(response.headers, 'content-type').startsWith('image')) {
-      return <ImageWithSize src={request.url} />;
+    if (getHeaderValue(response.headers, 'content-type').startsWith('image/')) {
+      if (response.data) {
+        const src = `data:${getHeaderValue(
+          response.headers,
+          'content-type',
+        )};base64,${response.data}`;
+        return <ImageWithSize src={src} />;
+      } else {
+        // fallback to using the request url
+        return <ImageWithSize src={request.url} />;
+      }
     }
   };
 }
@@ -492,7 +501,7 @@ class VideoFormatter {
 
   formatResponse = (request: Request, response: Response) => {
     const contentType = getHeaderValue(response.headers, 'content-type');
-    if (contentType.startsWith('video')) {
+    if (contentType.startsWith('video/')) {
       return (
         <MediaContainer>
           <VideoFormatter.Video controls={true}>