if the uploaded file is an image mime type, display it

css/bootstrap/zerobin.css

@@ -32,6 +32,11 @@ body.navbar-spacing {
 	cursor: default;
 }
 
+#image img {
+	max-width: 100%;
+	height: auto;
+}
+
 #deletelink {
 	float: right;
 }

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; }

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,10 +616,13 @@ $(function() {
                     if (cleartext.length == 0 && !comments[0].attachment) throw 'failed to decipher message';
 
                     this.passwordInput.val(password);
+                    if (cleartext.length > 0)
+                    {
                         helper.setElementText(this.clearText, cleartext);
                         helper.setElementText(this.prettyPrint, cleartext);
                         this.formatPaste(comments[0].meta.formatter);
                     }
+                }
                 catch(err)
                 {
                     this.clearText.addClass('hidden');
@@ -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');

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>

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>

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>