From 8a12b2f37f20ee700b27a84755817778a722eac1 Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Tue, 30 Jun 2015 18:27:16 +1000
Subject: [PATCH] Improve single image uploader

---
 modules/backend/formwidgets/FileUpload.php    | 28 ++++++++++++++-----
 .../fileupload/assets/css/fileupload.css      |  2 ++
 .../fileupload/assets/js/fileupload.js        | 10 ++++++-
 .../assets/less/fileupload.imagesingle.less   |  6 ++++
 .../fileupload/partials/_image_single.htm     |  4 ++-
 5 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/modules/backend/formwidgets/FileUpload.php b/modules/backend/formwidgets/FileUpload.php
index d8ed1ca59..f5cb686ac 100644
--- a/modules/backend/formwidgets/FileUpload.php
+++ b/modules/backend/formwidgets/FileUpload.php
@@ -124,6 +124,7 @@ class FileUpload extends FormWidgetBase
         $this->vars['imageWidth'] = $this->imageWidth;
         $this->vars['acceptedFileTypes'] = $this->getAcceptedFileTypes(true);
         $this->vars['cssDimensions'] = $this->getCssDimensions();
+        $this->vars['cssBlockDimensions'] = $this->getCssDimensions('block');
         $this->vars['useCaption'] = $this->useCaption;
         $this->vars['prompt'] = str_replace('%s', '<i class="icon-upload"></i>', trans($this->prompt));
     }
@@ -168,22 +169,35 @@ class FileUpload extends FormWidgetBase
     /**
      * Returns the CSS dimensions for the uploaded image,
      * uses auto where no dimension is provided.
+     * @param string $mode
      * @return string
      */
-    protected function getCssDimensions()
+    protected function getCssDimensions($mode = null)
     {
         if (!$this->imageWidth && !$this->imageHeight) {
             return '';
         }
 
         $cssDimensions = '';
-        $cssDimensions .= ($this->imageWidth)
-            ? 'width: '.$this->imageWidth.'px;'
-            : 'width: auto;';
 
-        $cssDimensions .= ($this->imageHeight)
-            ? 'height: '.$this->imageHeight.'px;'
-            : 'height: auto;';
+        if ($mode == 'block') {
+            $cssDimensions .= ($this->imageWidth)
+                ? 'width: '.$this->imageWidth.'px;'
+                : 'width: '.$this->imageHeight.'px;';
+
+            $cssDimensions .= ($this->imageHeight)
+                ? 'height: '.$this->imageHeight.'px;'
+                : 'height: auto;';
+        }
+        else {
+            $cssDimensions .= ($this->imageWidth)
+                ? 'width: '.$this->imageWidth.'px;'
+                : 'width: auto;';
+
+            $cssDimensions .= ($this->imageHeight)
+                ? 'height: '.$this->imageHeight.'px;'
+                : 'height: auto;';
+        }
 
         return $cssDimensions;
     }
diff --git a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css
index 75630f841..26407b93c 100644
--- a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css
+++ b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css
@@ -426,6 +426,8 @@
   display: block;
   max-width: 100%;
   height: auto;
+  min-height: 100px;
+  min-width: 100px;
 }
 .field-fileupload.style-image-single .upload-object .progress-bar {
   display: block;
diff --git a/modules/backend/formwidgets/fileupload/assets/js/fileupload.js b/modules/backend/formwidgets/fileupload/assets/js/fileupload.js
index 2d3fafc9f..341532184 100644
--- a/modules/backend/formwidgets/fileupload/assets/js/fileupload.js
+++ b/modules/backend/formwidgets/fileupload/assets/js/fileupload.js
@@ -118,6 +118,12 @@
             this.uploaderOptions.headers['X-OCTOBER-FILEUPLOAD'] = this.options.uniqueId
         }
 
+        this.uploaderOptions.thumbnailWidth = this.options.thumbnailWidth
+            ? this.options.thumbnailWidth : null
+
+        this.uploaderOptions.thumbnailHeight = this.options.thumbnailHeight
+            ? this.options.thumbnailHeight : null
+
         /*
          * Add CSRF token to headers
          */
@@ -326,7 +332,9 @@
         errorTemplate: null,
         isMulti: null,
         isPreview: null,
-        isSortable: null
+        isSortable: null,
+        thumbnailWidth: 120,
+        thumbnailHeight: 120
     }
 
     // FILEUPLOAD PLUGIN DEFINITION
diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less
index c17530480..a0b49828c 100644
--- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less
+++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less
@@ -25,6 +25,12 @@
             &.image img {
                 .border-radius(3px);
                 .img-responsive();
+
+                // This is needed when the image is very large and
+                // being processed by dropzone on the client-side
+                // the image has no height or width.
+                min-height: 100px;
+                min-width: 100px;
             }
         }
 
diff --git a/modules/backend/formwidgets/fileupload/partials/_image_single.htm b/modules/backend/formwidgets/fileupload/partials/_image_single.htm
index ac855f408..7b62c194c 100644
--- a/modules/backend/formwidgets/fileupload/partials/_image_single.htm
+++ b/modules/backend/formwidgets/fileupload/partials/_image_single.htm
@@ -5,6 +5,8 @@
     data-template="#<?= $this->getId('template') ?>"
     data-error-template="#<?= $this->getId('errorTemplate') ?>"
     data-unique-id="<?= $this->getId() ?>"
+    data-thumbnail-width="<?= $imageWidth ?: '0' ?>"
+    data-thumbnail-height="<?= $imageHeight ?: '0' ?>"
     <?php if ($useCaption): ?>data-config-handler="<?= $this->getEventHandler('onLoadAttachmentConfig') ?>"<?php endif ?>
     <?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
 >
@@ -12,7 +14,7 @@
     <!-- Add New Image -->
     <a
         href="javascript:;"
-        style="<?= $cssDimensions ?>"
+        style="<?= $cssBlockDimensions ?>"
         class="upload-button">
         <span class="upload-button-icon oc-<?= $emptyIcon ?>"></span>
     </a>