diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -231,19 +231,38 @@
     }
 
     const { pendingUploads, cancelPendingUpload } = this.props.inputState;
-    const multimediaPreviews = pendingUploads.map(pendingUpload => (
-      <Multimedia
-        mediaSource={{
+    const multimediaPreviews = pendingUploads.map(pendingUpload => {
+      let mediaSource;
+      if (
+        pendingUpload.mediaType !== 'encrypted_photo' &&
+        pendingUpload.mediaType !== 'encrypted_video'
+      ) {
+        mediaSource = {
           type: pendingUpload.mediaType,
           uri: pendingUpload.uri,
-        }}
-        pendingUpload={pendingUpload}
-        remove={cancelPendingUpload}
-        multimediaCSSClass={css.multimedia}
-        multimediaImageCSSClass={css.multimediaImage}
-        key={pendingUpload.localID}
-      />
-    ));
+        };
+      } else {
+        invariant(
+          pendingUpload.encryptionKey,
+          'encryptionKey should be set for encrypted media',
+        );
+        mediaSource = {
+          type: pendingUpload.mediaType,
+          holder: pendingUpload.uri,
+          encryptionKey: pendingUpload.encryptionKey,
+        };
+      }
+      return (
+        <Multimedia
+          mediaSource={mediaSource}
+          pendingUpload={pendingUpload}
+          remove={cancelPendingUpload}
+          multimediaCSSClass={css.multimedia}
+          multimediaImageCSSClass={css.multimediaImage}
+          key={pendingUpload.localID}
+        />
+      );
+    });
     const previews =
       multimediaPreviews.length > 0 ? (
         <div className={css.previews}>{multimediaPreviews}</div>
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -693,6 +693,7 @@
           uri,
           loop: false,
           uriIsReal: false,
+          encryptionKey: null,
           progressPercent: 0,
           abort: null,
           steps,
diff --git a/web/input/input-state.js b/web/input/input-state.js
--- a/web/input/input-state.js
+++ b/web/input/input-state.js
@@ -4,6 +4,7 @@
 
 import {
   type MediaType,
+  type EncryptedMediaType,
   type Dimensions,
   type MediaMissionStep,
 } from 'lib/types/media-types.js';
@@ -19,9 +20,10 @@
   // This is set to true if the upload fails for whatever reason
   failed: boolean,
   file: File,
-  mediaType: MediaType,
+  mediaType: MediaType | EncryptedMediaType,
   dimensions: ?Dimensions,
   uri: string,
+  encryptionKey: ?string,
   loop: boolean,
   // URLs created with createObjectURL aren't considered "real". The distinction
   // is required because those "fake" URLs must be disposed properly