From 39e865ca64ffe2a10c7f93f800ea3df54acf3936 Mon Sep 17 00:00:00 2001
From: El RIDO <elrido@gmx.net>
Date: Fri, 18 Sep 2015 21:41:50 +0200
Subject: [PATCH] if the uploaded file is an image mime type, display it

---
 css/bootstrap/zerobin.css  |  5 +++++
 css/zerobin.css            |  9 +++++++--
 js/zerobin.js              | 24 ++++++++++++++++++++----
 tpl/bootstrap-compact.html |  1 +
 tpl/bootstrap.html         |  1 +
 tpl/page.html              |  1 +
 6 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/css/bootstrap/zerobin.css b/css/bootstrap/zerobin.css
index 8d3a916d..e901062d 100644
--- a/css/bootstrap/zerobin.css
+++ b/css/bootstrap/zerobin.css
@@ -32,6 +32,11 @@ body.navbar-spacing {
 	cursor: default;
 }
 
+#image img {
+	max-width: 100%;
+	height: auto;
+}
+
 #deletelink {
 	float: right;
 }
diff --git a/css/zerobin.css b/css/zerobin.css
index 21bd230d..fe036eba 100644
--- a/css/zerobin.css
+++ b/css/zerobin.css
@@ -96,6 +96,11 @@ h3.title {
 	font-family: Consolas, "Lucida Console", "DejaVu Sans Mono", Monaco, monospace;
 }
 
+#image img {
+	max-width: 100%;
+	height: auto;
+}
+
 #status { 
 	clear: both;
 	padding: 5px 10px;
@@ -236,7 +241,7 @@ input {
 	font-weight: bold !important;
 }
 
-.nonworking {
+#image, .nonworking {
 	background-color: #fff;
 	color: #000;
 	width: 100%;
@@ -246,7 +251,7 @@ input {
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
-	padding: 5px;
+	padding: 5px 0;
 }
 
 .hidden { display: none !important; }
diff --git a/js/zerobin.js b/js/zerobin.js
index 619e0ec1..fcdfe69b 100644
--- a/js/zerobin.js
+++ b/js/zerobin.js
@@ -594,6 +594,18 @@ $(function() {
                         }
                         this.attachmentLink.attr('href', attachment);
                         this.attachment.removeClass('hidden');
+                        
+                        // if the attachment is an image, display it
+                        var imagePrefix = 'data:image/';
+                        if (attachment.substring(0, imagePrefix.length) == imagePrefix)
+                        {
+                            this.image.html(
+                                $(document.createElement('img'))
+                                    .attr('src', attachment)
+                                    .attr('class', 'img-thumbnail')
+                            );
+                            this.image.removeClass('hidden');
+                        }
                     }
                     var cleartext = filter.decipher(key, password, comments[0].data);
                     if (cleartext.length == 0 && password.length == 0 && !comments[0].attachment)
@@ -604,9 +616,12 @@ $(function() {
                     if (cleartext.length == 0 && !comments[0].attachment) throw 'failed to decipher message';
 
                     this.passwordInput.val(password);
-                    helper.setElementText(this.clearText, cleartext);
-                    helper.setElementText(this.prettyPrint, cleartext);
-                    this.formatPaste(comments[0].meta.formatter);
+                    if (cleartext.length > 0)
+                    {
+                        helper.setElementText(this.clearText, cleartext);
+                        helper.setElementText(this.prettyPrint, cleartext);
+                        this.formatPaste(comments[0].meta.formatter);
+                    }
                 }
                 catch(err)
                 {
@@ -984,7 +999,7 @@ $(function() {
             this.pasteResult.addClass('hidden');
             this.message.addClass('hidden');
             this.clearText.addClass('hidden');
-            this.prettyMessage.removeClass('hidden');
+            this.prettyMessage.addClass('hidden');
         },
 
         /**
@@ -1163,6 +1178,7 @@ $(function() {
             this.fileRemoveButton = $('#fileremovebutton');
             this.fileWrap = $('#filewrap');
             this.formatter = $('#formatter');
+            this.image = $('#image');
             this.message = $('#message');
             this.newButton = $('#newbutton');
             this.openDisc = $('#opendisc');
diff --git a/tpl/bootstrap-compact.html b/tpl/bootstrap-compact.html
index 42f6f931..248d3449 100644
--- a/tpl/bootstrap-compact.html
+++ b/tpl/bootstrap-compact.html
@@ -158,6 +158,7 @@
 		</header>
 		<section class="container">
 			<article class="row">
+				<div id="image" class="col-md-12 text-center hidden"></div>
 				<div id="prettymessage" class="col-md-12 hidden">
 					<pre id="prettyprint" class="col-md-12 prettyprint linenums:1"></pre>
 				</div>
diff --git a/tpl/bootstrap.html b/tpl/bootstrap.html
index 79de3270..bab0074f 100644
--- a/tpl/bootstrap.html
+++ b/tpl/bootstrap.html
@@ -156,6 +156,7 @@
 		</header>
 		<section class="container">
 			<article class="row">
+				<div id="image" class="col-md-12 text-center hidden"></div>
 				<div id="prettymessage" class="col-md-12 hidden">
 					<pre id="prettyprint" class="col-md-12 prettyprint linenums:1"></pre>
 				</div>
diff --git a/tpl/page.html b/tpl/page.html
index 25de327f..ba847898 100644
--- a/tpl/page.html
+++ b/tpl/page.html
@@ -81,6 +81,7 @@
 					<span id="filewrap">{function="t('Attach a file:')"} <input type="file" id="file" name="file" /></span>
 					<button id="fileremovebutton">{function="t('Remove attachment')"}</button>
 				</div>{/if}
+				<div id="image" class="hidden"></div>
 				<div id="prettymessage" class="hidden">
 					<pre id="prettyprint" class="prettyprint linenums:1"></pre>
 				</div>