Merge pull request #312 from dewanhimanshu/feature-image-preview

file preview feature added

client/index.html

@@ -80,6 +80,10 @@
                 <h3>File Received</h3>
                 <div class="font-subheading" id="fileName">Filename</div>
                 <div class="font-body2" id="fileSize"></div>
+                <div class='preview' style="visibility: hidden;">
+                    <img id='img-preview' src="">
+                </div>
+                <div>
                 <div class="row">
                     <label for="autoDownload" class="grow">Ask to save each file before downloading</label>
                     <input type="checkbox" id="autoDownload" checked="">

client/scripts/ui.js

@@ -266,6 +266,11 @@ class ReceiveDialog extends Dialog {
             $a.click()
             return
         }
+        if(file.mime.split('/')[0] === 'image'){
+            console.log('the file is image');
+            this.$el.querySelector('.preview').style.visibility = 'inherit';
+            this.$el.querySelector("#img-preview").src = url;
+        }
 
         this.$el.querySelector('#fileName').textContent = file.name;
         this.$el.querySelector('#fileSize').textContent = this._formatFileSize(file.size);
@@ -292,6 +297,8 @@ class ReceiveDialog extends Dialog {
     }
 
     hide() {
+        this.$el.querySelector('.preview').style.visibility = 'hidden';
+        this.$el.querySelector("#img-preview").src = "";
         super.hide();
         this._dequeueFile();
     }

client/styles.css

@@ -716,6 +716,12 @@ x-dialog x-paper {
     color: var(--text-color);
     background-color: var(--bg-color-secondary);
 }
+/* Image Preview */
+#img-preview{
+    max-width:100%;
+    max-height:100%;
+   
+}
 
 
 /* Styles for users who prefer dark mode at the OS level */
@@ -746,4 +752,5 @@ x-dialog x-paper {
     body {
         overflow: hidden;
     }
-}
+}
+