Improve single image uploader

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

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;

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

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

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>