Show file extension icons for non-image files in the FileUpload widget

modules/backend/assets/less/controls/file-icon.less

@@ -0,0 +1,76 @@
+.file-icon {
+    fill-rule: evenodd;
+    clip-rule: evenodd;
+    stroke-linejoin: round;
+    stroke-miterlimit: 2;
+    display: inline-block;
+
+    &-extension {
+        font-family: 'ArialMT','Arial',sans-serif;
+        font-size: 4em;
+        font-weight: 900;
+        fill: var(--wn-filetype-label, #fff);
+    }
+
+    &-label {
+        fill: var(--wn-text, #576D7E); /* Default color */
+        fill-rule: nonzero;
+    }
+
+    &-css,
+    &-less,
+    &-scss {
+        fill: var(--wn-filetype-scss, #B73FD9);
+    }
+    &-html,
+    &-xml {
+        fill: var(--wn-filetype-xml, #EA9B47);
+    }
+    &-js,
+    &-json {
+        fill: var(--wn-filetype-json, #A9A9A9);
+    }
+    &-pdf {
+        fill: var(--wn-filetype-pdf, #E30713);
+    }
+    &-txt {
+        fill: var(--wn-filetype-txt, #248BD0);
+    }
+    &-ai {
+        fill: var(--wn-filetype-ai, #F29200);
+    }
+    &-eps {
+        fill: var(--wn-filetype-eps, #F9B234);
+    }
+    &-psd {
+        fill: var(--wn-filetype-psd, #2DAAE2);
+    }
+    &-ttf,
+    &-otf,
+    &-woff,
+    &-woff2 {
+        fill: var(--wn-filetype-woff2, #C4CA10);
+    }
+    &-doc,
+    &-docx,
+    &-rtf,
+    &-odt {
+        fill: var(--wn-filetype-odt, #0F70B7);
+    }
+    &-csv,
+    &-ods,
+    &-xls,
+    &-xlsx {
+        fill: var(--wn-filetype-xlsx, #3BAA34);
+    }
+    &-odp,
+    &-ppt,
+    &-pptx {
+        fill: var(--wn-filetype-pptx, #D04526);
+    }
+    &-rar,
+    &-tar,
+    &-zip {
+        fill: var(--wn-filetype-zip, #363A56);
+    }
+}

modules/backend/facades/Backend.php

@@ -12,6 +12,7 @@
  * @method static \Illuminate\Http\RedirectResponse redirectIntended(string $path, int $status = 302, array $headers = [], ?bool $secure = null)
  * @method static string date($dateTime, array $options = [])
  * @method static string dateTime($dateTime, array $options = [])
+ * @method static string fileIcon(string $extension)
  *
  * @see \Backend\Helpers\Backend
  */

modules/backend/formwidgets/FileUpload.php

@@ -4,6 +4,7 @@
 
 use Backend\Classes\FormField;
 use Backend\Classes\FormWidgetBase;
+use Backend\Facades\Backend;
 use Backend\Widgets\Form;
 use Exception;
 use Illuminate\Support\Facades\Response;
@@ -104,6 +105,11 @@ class FileUpload extends FormWidgetBase
      */
     protected $configFormWidget;
 
+    /**
+     * @var array Extensions of image files that browsers can display, other files are shown with a file icon.
+     */
+    protected $displayableImageExtensions = ['avif', 'bmp', 'gif', 'ico', 'jpeg', 'jpg', 'png', 'svg', 'webp'];
+
     /**
      * @inheritDoc
      */
@@ -511,6 +517,7 @@ public function onUpload()
             $result = [
                 'id' => $file->id,
                 'thumb' => $file->thumbUrl,
+                'icon' => $this->makeFileIcon($file),
                 'path' => $file->pathUrl
             ];
 
@@ -543,6 +550,21 @@ protected function decorateFileAttributes($file)
         return $file;
     }
 
+    /**
+     * Renders a file extension icon for files that cannot be displayed as an image,
+     * returns null for image files.
+     */
+    protected function makeFileIcon($file): ?string
+    {
+        $extension = strtolower($file->getExtension());
+
+        if (in_array($extension, $this->displayableImageExtensions)) {
+            return null;
+        }
+
+        return Backend::fileIcon($extension);
+    }
+
     /**
      * Return max upload filesize in Mb
      * @return integer

modules/backend/formwidgets/fileupload/assets/js/fileupload.js

@@ -215,7 +215,13 @@
             $preview.data('id', response.id)
             $preview.data('path', response.path)
             $('.upload-remove-button', $preview).data('request-data', { file_id: response.id })
-            $img.attr('src', response.thumb)
+
+            if (response.icon) {
+                $img.replaceWith(response.icon)
+            }
+            else {
+                $img.attr('src', response.thumb)
+            }
         }
 
         this.triggerChange();

modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less

@@ -46,6 +46,11 @@
                 font-size: 35px;
             }
 
+            .file-icon {
+                width: 44px;
+                height: 44px;
+            }
+
             &.image img {
                 .border-left-radius(3px);
                 width: auto;

modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less

@@ -32,6 +32,12 @@
                 min-height: 100px;
                 min-width: 100px;
             }
+
+            .file-icon {
+                display: block;
+                width: 100px;
+                height: 100px;
+            }
         }
 
         .progress-bar {

modules/backend/formwidgets/fileupload/assets/less/fileupload.less

@@ -1,4 +1,5 @@
 @import "../../../../assets/less/core/boot.less";
+@import "../../../../assets/less/controls/file-icon.less";
 
 @fileupload-progress-bar-height: 5px;
 @fileupload-progress-bar-color:  var(--wn-fileupload-progress-bar-color, #fff);

modules/backend/formwidgets/fileupload/partials/_image_multi.php

@@ -26,7 +26,11 @@ class="field-fileupload style-image-multi is-sortable is-multi <?= count($fileLi
         <?php foreach ($fileList as $file): ?>
             <div class="upload-object is-success" data-id="<?= $file->id ?>" data-path="<?= $file->pathUrl ?>">
                 <div class="icon-container image">
-                    <img src="<?= $file->thumbUrl ?>" alt="" />
+                    <?php if ($fileIcon = $this->makeFileIcon($file)): ?>
+                        <?= $fileIcon ?>
+                    <?php else: ?>
+                        <img src="<?= $file->thumbUrl ?>" alt="" />
+                    <?php endif ?>
                 </div>
                 <div class="info">
                     <h4 class="filename">

modules/backend/formwidgets/fileupload/partials/_image_single.php

@@ -30,7 +30,11 @@ class="upload-button">
         <?php if ($singleFile): ?>
             <div class="upload-object is-success" data-id="<?= $singleFile->id ?>" data-path="<?= $singleFile->pathUrl ?>">
                 <div class="icon-container image">
-                    <img src="<?= $singleFile->thumbUrl ?>" alt="" />
+                    <?php if ($fileIcon = $this->makeFileIcon($singleFile)): ?>
+                        <?= $fileIcon ?>
+                    <?php else: ?>
+                        <img src="<?= $singleFile->thumbUrl ?>" alt="" />
+                    <?php endif ?>
                 </div>
                 <div class="info">
                     <h4 class="filename">

modules/backend/helpers/Backend.php

@@ -7,6 +7,7 @@
 use Exception;
 use Illuminate\Support\Facades\Redirect;
 use Illuminate\Support\Facades\Request;
+use Illuminate\Support\Facades\View;
 use System\Helpers\DateTime as DateTimeHelper;
 use Winter\Storm\Router\Helper as RouterHelper;
 use Winter\Storm\Support\Facades\Config;
@@ -182,6 +183,16 @@ public function dateTime($dateTime, $options = [])
         return '<time'.Html::attributes($attributes).'>'.e($defaultValue).'</time>'.PHP_EOL;
     }
 
+    /**
+     * Returns the SVG markup for a generic file icon labelled with the given file extension.
+     */
+    public function fileIcon(string $extension): string
+    {
+        return View::make('backend::file_icon', [
+            'extension' => substr(strtolower(ltrim($extension, '.')), 0, 4),
+        ])->render();
+    }
+
     /**
      * Decompiles the compilation asset files
      *

modules/backend/views/file_icon.php

@@ -0,0 +1,10 @@
+<svg class="file-icon" viewBox="0 0 250 250" xml:space="preserve">
+    <path d="M62.5,0c-8.594,0 -15.625,7.031 -15.625,15.625l0,218.75c0,8.594 7.031,15.625 15.625,15.625l156.25,0c8.594,0 15.625,-7.031 15.625,-15.625l0,-171.875l-62.5,-62.5l-109.375,0Z" style="fill:#e2e5e7;fill-rule:nonzero;"/>
+    <path d="M187.5,62.5l46.875,0l-62.5,-62.5l0,46.875c0,8.594 7.031,15.625 15.625,15.625Z" style="fill:#b0b7bd;fill-rule:nonzero;"/>
+    <path d="M234.375,109.375l-46.875,-46.875l46.875,0l0,46.875Z" style="fill:#cad1d8;fill-rule:nonzero;"/>
+    <path d="M195.313,210.938l-148.438,-0.001l0,7.813l148.438,0c4.296,0 7.812,-3.516 7.812,-7.813l-0,-7.812c-0,4.297 -3.516,7.813 -7.813,7.813Z" style="fill:#cad1d8;fill-rule:nonzero;"/>
+    <!-- Colour label -->
+    <path class="file-icon-label file-icon-<?= e($extension) ?>" d="M203.125,203.125c0,4.297 -3.516,7.813 -7.813,7.813l-171.875,-0c-4.296,-0 -7.812,-3.516 -7.812,-7.813l-0,-78.125c-0,-4.297 3.516,-7.813 7.812,-7.813l171.875,0.001c4.297,-0.001 7.813,3.515 7.813,7.812l0,78.125Z"/>
+    <!-- Extension text node -->
+    <text class="file-icon-extension" x="43%" y="170px" dominant-baseline="middle" text-anchor="middle"><?= e(strtoupper($extension)) ?></text>
+</svg>

modules/backend/widgets/mediamanager/assets/css/mediamanager.css

@@ -1,40 +1,40 @@
+.file-icon{fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:inline-block}
+.file-icon-extension{font-family:'ArialMT','Arial',sans-serif;font-size:4em;font-weight:900;fill:var(--wn-filetype-label,#fff)}
+.file-icon-label{fill:var(--wn-text,#576D7E);fill-rule:nonzero}
+.file-icon-css,
+.file-icon-less,
+.file-icon-scss{fill:var(--wn-filetype-scss,#B73FD9)}
+.file-icon-html,
+.file-icon-xml{fill:var(--wn-filetype-xml,#EA9B47)}
+.file-icon-js,
+.file-icon-json{fill:var(--wn-filetype-json,#A9A9A9)}
+.file-icon-pdf{fill:var(--wn-filetype-pdf,#E30713)}
+.file-icon-txt{fill:var(--wn-filetype-txt,#248BD0)}
+.file-icon-ai{fill:var(--wn-filetype-ai,#F29200)}
+.file-icon-eps{fill:var(--wn-filetype-eps,#F9B234)}
+.file-icon-psd{fill:var(--wn-filetype-psd,#2DAAE2)}
+.file-icon-ttf,
+.file-icon-otf,
+.file-icon-woff,
+.file-icon-woff2{fill:var(--wn-filetype-woff2,#C4CA10)}
+.file-icon-doc,
+.file-icon-docx,
+.file-icon-rtf,
+.file-icon-odt{fill:var(--wn-filetype-odt,#0F70B7)}
+.file-icon-csv,
+.file-icon-ods,
+.file-icon-xls,
+.file-icon-xlsx{fill:var(--wn-filetype-xlsx,#3BAA34)}
+.file-icon-odp,
+.file-icon-ppt,
+.file-icon-pptx{fill:var(--wn-filetype-pptx,#D04526)}
+.file-icon-rar,
+.file-icon-tar,
+.file-icon-zip{fill:var(--wn-filetype-zip,#363A56)}
 div[data-control="media-manager"]:focus{outline:none}
 div[data-control="media-manager"] audio,
 div[data-control="media-manager"] video{width:100%}
 div[data-control="media-manager"] video{background:var(--wn-surface-hover,#ecf0f1);max-height:225px}
-div[data-control="media-manager"] .file-icon{fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;display:inline-block}
-div[data-control="media-manager"] .file-icon-extension{font-family:'ArialMT','Arial',sans-serif;font-size:4em;font-weight:900;fill:var(--wn-filetype-label,#fff)}
-div[data-control="media-manager"] .file-icon-label{fill:var(--wn-text,#576D7E);fill-rule:nonzero}
-div[data-control="media-manager"] .file-icon-css,
-div[data-control="media-manager"] .file-icon-less,
-div[data-control="media-manager"] .file-icon-scss{fill:var(--wn-filetype-scss,#B73FD9)}
-div[data-control="media-manager"] .file-icon-html,
-div[data-control="media-manager"] .file-icon-xml{fill:var(--wn-filetype-xml,#EA9B47)}
-div[data-control="media-manager"] .file-icon-js,
-div[data-control="media-manager"] .file-icon-json{fill:var(--wn-filetype-json,#A9A9A9)}
-div[data-control="media-manager"] .file-icon-pdf{fill:var(--wn-filetype-pdf,#E30713)}
-div[data-control="media-manager"] .file-icon-txt{fill:var(--wn-filetype-txt,#248BD0)}
-div[data-control="media-manager"] .file-icon-ai{fill:var(--wn-filetype-ai,#F29200)}
-div[data-control="media-manager"] .file-icon-eps{fill:var(--wn-filetype-eps,#F9B234)}
-div[data-control="media-manager"] .file-icon-psd{fill:var(--wn-filetype-psd,#2DAAE2)}
-div[data-control="media-manager"] .file-icon-ttf,
-div[data-control="media-manager"] .file-icon-otf,
-div[data-control="media-manager"] .file-icon-woff,
-div[data-control="media-manager"] .file-icon-woff2{fill:var(--wn-filetype-woff2,#C4CA10)}
-div[data-control="media-manager"] .file-icon-doc,
-div[data-control="media-manager"] .file-icon-docx,
-div[data-control="media-manager"] .file-icon-rtf,
-div[data-control="media-manager"] .file-icon-odt{fill:var(--wn-filetype-odt,#0F70B7)}
-div[data-control="media-manager"] .file-icon-csv,
-div[data-control="media-manager"] .file-icon-ods,
-div[data-control="media-manager"] .file-icon-xls,
-div[data-control="media-manager"] .file-icon-xlsx{fill:var(--wn-filetype-xlsx,#3BAA34)}
-div[data-control="media-manager"] .file-icon-odp,
-div[data-control="media-manager"] .file-icon-ppt,
-div[data-control="media-manager"] .file-icon-pptx{fill:var(--wn-filetype-pptx,#D04526)}
-div[data-control="media-manager"] .file-icon-rar,
-div[data-control="media-manager"] .file-icon-tar,
-div[data-control="media-manager"] .file-icon-zip{fill:var(--wn-filetype-zip,#363A56)}
 div[data-control="media-manager"] .media-player-fallback{font-size:13px;color:var(--wn-text-secondary,#95a5a6);background:var(--wn-surface-hover,#ecf0f1);line-height:180%}
 div[data-control="media-manager"] .media-player-fallback.panel-embedded{padding:20px;margin:-20px -20px 0 -20px}
 div[data-control="media-manager"] .empty-library{padding:20px;text-align:center}