diff --git a/src/ui/component/fileDetails/view.jsx b/src/ui/component/fileDetails/view.jsx
index 67671195a..0e440fa4f 100644
--- a/src/ui/component/fileDetails/view.jsx
+++ b/src/ui/component/fileDetails/view.jsx
@@ -25,6 +25,9 @@ class FileDetails extends PureComponent<Props> {
     const { description, languages, license } = metadata;
 
     const mediaType = contentType || 'unknown';
+    const fileSize = metadata.source.size
+      ? formatBytes(metadata.source.size)
+      : fileInfo && fileInfo.download_path && formatBytes(fileInfo.written_bytes);
     let downloadPath = fileInfo && fileInfo.download_path ? path.normalize(fileInfo.download_path) : null;
     let downloadNote;
     // If the path is blank, file is not avialable. Create path from name so the folder opens on click.
@@ -50,6 +53,13 @@ class FileDetails extends PureComponent<Props> {
               {': '}
               {mediaType}
             </div>
+            {fileSize && (
+              <div>
+                {__('File Size')}
+                {': '}
+                {fileSize}
+              </div>
+            )}
             <div>
               {__('Languages')}
               {': '}
@@ -81,5 +91,17 @@ class FileDetails extends PureComponent<Props> {
     );
   }
 }
+// move this with other helper functions when we re-use it
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
 
 export default FileDetails;
diff --git a/src/ui/component/fileViewer/internal/player.jsx b/src/ui/component/fileViewer/internal/player.jsx
index a63a86890..42218743d 100644
--- a/src/ui/component/fileViewer/internal/player.jsx
+++ b/src/ui/component/fileViewer/internal/player.jsx
@@ -316,7 +316,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
 
   playableType(): boolean {
     const { mediaType } = this.props;
-    return ['audio', 'video'].indexOf(mediaType) !== -1;
+    return ['audio', 'video', 'image'].indexOf(mediaType) !== -1;
   }
 
   isRenderMediaSupported() {