Use blob for previews

js/privatebin.js

@@ -2547,7 +2547,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                 $attachmentLink.attr('download', fileName);
             }
 
-            me.handleAttachmentPreview($attachmentPreview, attachmentData);
+            //me.handleAttachmentPreview($attachmentPreview, attachmentData);
+            me.handleBlobAttachmentPreview($attachmentPreview, blobUrl, mediaType);
         };
 
         /**
@@ -2819,6 +2820,73 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             }
         };
 
+        /**
+         * handle the preview of files decoded to blob that can either be an image, video, audio or pdf element
+         *
+         * @name   AttachmentViewer.handleBlobAttachmentPreview
+         * @function
+         * @argument {jQuery} $targetElement element where the preview should be appended
+         * @argument {string} file as a blob URL
+         * @argument {string} mime type
+         */
+        me.handleBlobAttachmentPreview = function ($targetElement, blobUrl, mimeType) {
+            if (blobUrl) {
+                attachmentHasPreview = true;
+                if (mimeType.match(/image\//i)) {
+                    $targetElement.html(
+                        $(document.createElement('img'))
+                            .attr('src', blobUrl)
+                            .attr('class', 'img-thumbnail')
+                    );
+                } else if (mimeType.match(/video\//i)) {
+                    $targetElement.html(
+                        $(document.createElement('video'))
+                            .attr('controls', 'true')
+                            .attr('autoplay', 'true')
+                            .attr('class', 'img-thumbnail')
+
+                            .append($(document.createElement('source'))
+                            .attr('type', mimeType)
+                            .attr('src', blobUrl))
+                    );
+                } else if (mimeType.match(/audio\//i)) {
+                    $targetElement.html(
+                        $(document.createElement('audio'))
+                            .attr('controls', 'true')
+                            .attr('autoplay', 'true')
+
+                            .append($(document.createElement('source'))
+                            .attr('type', mimeType)
+                            .attr('src', blobUrl))
+                    );
+                } else if (mimeType.match(/\/pdf/i)) {
+                    // PDFs are only displayed if the filesize is smaller than about 1MB (after base64 encoding).
+                    // Bigger filesizes currently cause crashes in various browsers.
+                    // See also: https://code.google.com/p/chromium/issues/detail?id=69227
+
+                    // Firefox crashes with files that are about 1.5MB
+                    // The performance with 1MB files is bearable
+                    if (data.length > 1398488) {
+                        Alert.showError('File too large, to display a preview. Please download the attachment.'); //TODO: is this error really neccessary?
+                        return;
+                    }
+
+                    // Fallback for browsers, that don't support the vh unit
+                    var clientHeight = $(window).height();
+
+                    $targetElement.html(
+                        $(document.createElement('embed'))
+                            .attr('src', blobUrl)
+                            .attr('type', 'application/pdf')
+                            .attr('class', 'pdfPreview')
+                            .css('height', clientHeight)
+                    );
+                } else {
+                    attachmentHasPreview = false;
+                }
+            }
+        };
+
         /**
          * attaches the file attachment drag & drop handler to the page
          *