Uploader now supports defining acceptable file types

modules/backend/formwidgets/FileUpload.php

@@ -29,10 +29,26 @@ class FileUpload extends FormWidgetBase
      */
     public $defaultAlias = 'fileupload';
 
+    /**
+     * @var int Preview image width
+     */
     public $imageWidth;
+
+    /**
+     * @var int Preview image height
+     */
     public $imageHeight;
+
+    /**
+     * @var string Text to display when no file is associated
+     */
     public $previewNoFilesMessage;
 
+    /**
+     * @var mixed Collection of acceptable file types.
+     */
+    public $acceptedFileTypes;
+
     /**
      * {@inheritDoc}
      */
@@ -40,6 +56,7 @@ class FileUpload extends FormWidgetBase
     {
         $this->imageHeight = $this->getConfig('imageHeight', 100);
         $this->imageWidth = $this->getConfig('imageWidth', 100);
+        $this->acceptedFileTypes = $this->getConfig('fileTypes');
         $this->previewNoFilesMessage = $this->getConfig(
             'previewNoFilesMessage',
             'backend::lang.form.preview_no_files_message'
@@ -68,6 +85,7 @@ class FileUpload extends FormWidgetBase
         $this->vars['emptyIcon'] = $this->getConfig('emptyIcon', 'icon-plus');
         $this->vars['imageHeight'] = $this->imageHeight;
         $this->vars['imageWidth'] = $this->imageWidth;
+        $this->vars['acceptedFileTypes'] = $this->getAcceptedFileTypes(true);
     }
 
     protected function getFileList()
@@ -102,6 +120,41 @@ class FileUpload extends FormWidgetBase
         return $mode;
     }
 
+    /**
+     * Returns the specified accepted file types, or the default
+     * based on the mode. Image mode will return:
+     * - jpg,jpeg,bmp,png,gif,svg
+     * @return string
+     */
+    public function getAcceptedFileTypes($includeDot = false)
+    {
+        if (!$types = $this->acceptedFileTypes) {
+            $types = starts_with($this->getDisplayMode(), 'image')
+                ? 'jpg,jpeg,bmp,png,gif,svg'
+                : null;
+        }
+
+        if (!is_array($types)) {
+            $types = explode(',', $types);
+        }
+
+        $types = array_map(function($value) use ($includeDot) {
+            $value = trim($value);
+
+            if (substr($value, 0, 1) == '.') {
+                $value = substr($value, 1);
+            }
+
+            if ($includeDot) {
+                $value = '.'.$value;
+            }
+
+            return $value;
+        }, $types);
+
+        return implode(',', $types);
+    }
+
     /**
      * Returns the value as a relation object from the model,
      * supports nesting via HTML array.
@@ -213,11 +266,9 @@ class FileUpload extends FormWidgetBase
         try {
             $uploadedFile = Input::file('file_data');
 
-            $isImage = starts_with($this->getDisplayMode(), 'image');
-
             $validationRules = ['max:'.File::getMaxFilesize()];
-            if ($isImage) {
-                $validationRules[] = 'mimes:jpg,jpeg,bmp,png,gif,svg';
+            if ($fileTypes = $this->getAcceptedFileTypes()) {
+                $validationRules[] = 'mimes:'.$fileTypes;
             }
 
             $validation = Validator::make(

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

@@ -127,6 +127,10 @@
             method: 'POST'
         }
 
+        if (this.options.fileTypes) {
+            uploaderOptions.acceptedFiles = this.options.fileTypes
+        }
+
         /*
          * Bind uploader
          */
@@ -225,7 +229,8 @@
     }
 
     FileUpload.prototype.onUploadThumbnail = function(file, thumbUrl) {
-        // @todo
+        // Provides a thumbnail preview, could be useful
+        // but not used at this point in time.
     }
 
     FileUpload.prototype.onUploadComplete = function(file, data) {
@@ -290,6 +295,7 @@
         onFail: null,
         imageWidth: 100,
         imageHeight: 100,
+        fileTypes: null,
         itemTemplate: null,
         paramName: 'file_data'
     }

modules/backend/formwidgets/fileupload/partials/_file_multi.htm

@@ -4,6 +4,7 @@
     data-control="fileupload"
     data-unique-id="<?= $this->getId() ?>"
     data-sort-handler="<?= $this->getEventHandler('onSortAttachments') ?>"
+    <?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
     data-item-template="<?= $this->getId('template') ?>">
 
     <div class="file-multi">

modules/backend/formwidgets/fileupload/partials/_file_single.htm

@@ -3,6 +3,7 @@
     class="field-fileupload <?= $singleFile ? 'has-attachments' : '' ?>"
     data-control="fileupload"
     data-unique-id="<?= $this->getId() ?>"
+    <?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
     data-item-template="<?= $this->getId('template') ?>">
 
     <div class="file-single attachment-item" data-attachment-id="<?= $singleFile ? $singleFile->id : '' ?>">

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

@@ -6,6 +6,7 @@
     data-sort-handler="<?= $this->getEventHandler('onSortAttachments') ?>"
     data-image-width="<?= $imageWidth ?>"
     data-image-height="<?= $imageHeight ?>"
+    <?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
     data-item-template="<?= $this->getId('template') ?>">
 
     <div class="image-multi">

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

@@ -5,6 +5,7 @@
     data-unique-id="<?= $this->getId() ?>"
     data-image-width="<?= $imageWidth ?>"
     data-image-height="<?= $imageHeight ?>"
+    <?php if ($acceptedFileTypes): ?>data-file-types="<?= $acceptedFileTypes ?>"<?php endif ?>
     data-item-template="<?= $this->getId('template') ?>">
 
     <div