Ability to define accept file extensions for FileUpload and use these to determine Media Type for File Uploads

src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js

@@ -85,7 +85,7 @@
 
         /** Called when the component has linked all elements, this is when the form controller is available */
         function postLink() {
-            
+
         }
 
         function initialize() {
@@ -186,7 +186,7 @@
                         });
                     }
                 }
-                
+
             }
         }
 
@@ -325,7 +325,8 @@
              */
             onFilesChanged: "&",
             onInit: "&",
-            required: "="
+            required: "=",
+            acceptFileExt: "<?"
         },
         transclude: true,
         controllerAs: 'vm',

src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbsinglefileupload.directive.js

@@ -9,19 +9,24 @@
 *  is required because the only way to reset an upload control is to replace it's html.
 **/
 function umbSingleFileUpload($compile) {
+
+    // cause we have the same template twice I choose to extract it to its own variable:
+    var innerTemplate = "<input type='file' umb-file-upload accept='{{acceptFileExt}}'/>";
+
     return {
         restrict: "E",
         scope: {
-            rebuild: "="
+            rebuild: "=",
+            acceptFileExt: "<?"
         },
         replace: true,
-        template: "<div><input type='file' umb-file-upload /></div>",
-        link: function (scope, el, attrs) {
+        template: "<div>"+innerTemplate+"</div>",
+        link: function (scope, el) {
 
             scope.$watch("rebuild", function (newVal, oldVal) {
                 if (newVal && newVal !== oldVal) {
                     //recompile it!
-                    el.html("<input type='file' umb-file-upload />");
+                    el.html(innerTemplate);
                     $compile(el.contents())(scope);
                 }
             });
@@ -30,4 +35,4 @@ function umbSingleFileUpload($compile) {
     };
 }
 
-angular.module('umbraco.directives').directive("umbSingleFileUpload", umbSingleFileUpload);
+angular.module('umbraco.directives').directive("umbSingleFileUpload", umbSingleFileUpload);

src/Umbraco.Web.UI.Client/src/views/components/upload/umb-property-file-upload.html

@@ -6,9 +6,9 @@
         <div class="fileinput-button umb-upload-button-big" ng-hide="vm.files.length > 0">
             <i class="icon icon-page-up" aria-hidden="true"></i>
             <p><localize key="media_clickToUpload">Click to upload</localize></p>
-            <umb-single-file-upload></umb-single-file-upload>
+            <umb-single-file-upload accept-file-ext="vm.acceptFileExt"></umb-single-file-upload>
         </div>
-        
+
         <div ng-if="vm.files.length > 0">
             <div ng-if="!vm.hideSelection">
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js

@@ -11,11 +11,14 @@
      *
     */
     function fileUploadController($scope, fileManager) {
-        
+
         $scope.fileChanged = onFileChanged;
         //declare a special method which will be called whenever the value has changed from the server
         $scope.model.onValueChanged = onValueChanged;
 
+
+        $scope.fileExtensionsString = $scope.model.config.fileExtensions ? $scope.model.config.fileExtensions.map(x => "."+x.value).join(",") : "";
+
         /**
          * Called when the file selection value changes
          * @param {any} value
@@ -38,12 +41,12 @@
                 files: []
             });
         }
-        
+
     };
 
     angular.module("umbraco")
         .controller('Umbraco.PropertyEditors.FileUploadController', fileUploadController)
-        .run(function (mediaHelper, umbRequestHelper, assetsService) {
+        .run(function (mediaHelper) {
             if (mediaHelper && mediaHelper.registerFileResolver) {
 
                 //NOTE: The 'entity' can be either a normal media entity or an "entity" returned from the entityResource

src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html

@@ -4,6 +4,7 @@
                               property-alias="{{model.alias}}"
                               value="model.value"
                               required="model.validation.mandatory"
-                              on-files-selected="fileChanged(value)">
+                              on-files-selected="fileChanged(value)"
+                              accept-file-ext="fileExtensionsString">
     </umb-property-file-upload>
 </div>

src/Umbraco.Web/Editors/MediaController.cs

@@ -37,6 +37,8 @@
 using Umbraco.Web.Editors.Binders;
 using Umbraco.Web.Editors.Filters;
 using Umbraco.Core.Models.Entities;
+using static Umbraco.Web.PropertyEditors.FileUploadConfiguration;
+using Umbraco.Web.PropertyEditors;
 
 namespace Umbraco.Web.Editors
 {
@@ -704,10 +706,36 @@ public async Task<HttpResponseMessage> PostAddFile()
 
                     if (result.FormData["contentTypeAlias"] == Constants.Conventions.MediaTypes.AutoSelect)
                     {
-                        if (Current.Configs.Settings().Content.ImageFileTypes.Contains(ext))
+                        var mediaTypes = Services.MediaTypeService.GetAll();
+                        // Look up MediaTypes
+                        foreach (var mediaTypeItem in mediaTypes)
+                        {
+                            var fileProperty = mediaTypeItem.CompositionPropertyTypes.FirstOrDefault(x => x.Alias == "umbracoFile");
+                            if (fileProperty != null) {
+                                var dataTypeKey = fileProperty.DataTypeKey;
+                                var dataType = Services.DataTypeService.GetDataType(dataTypeKey);
+
+                                if (dataType != null && dataType.Configuration is IFileExtensionsConfig fileExtensionsConfig) {
+                                    var fileExtensions = fileExtensionsConfig.FileExtensions;
+                                    if (fileExtensions != null)
+                                    {
+                                        if (fileExtensions.Where(x => x.Value == ext).Count() != 0)
+                                        {
+                                            mediaType = mediaTypeItem.Alias;
+                                            break;
+                                        }
+                                    }
+                                }
+                            }
+
+                        }
+
+                        // If media type is still File then lets check if its a image.
+                        if (mediaType == Constants.Conventions.MediaTypes.File && Current.Configs.Settings().Content.ImageFileTypes.Contains(ext))
                         {
                             mediaType = Constants.Conventions.MediaTypes.Image;
                         }
+
                     }
                     else
                     {

src/Umbraco.Web/PropertyEditors/FileExtensionConfigItem.cs

@@ -0,0 +1,13 @@
+using Newtonsoft.Json;
+
+namespace Umbraco.Web.PropertyEditors
+{
+    public class FileExtensionConfigItem : IFileExtensionConfigItem
+    {
+        [JsonProperty("id")]
+        public int Id { get; set; }
+
+        [JsonProperty("value")]
+        public string Value { get; set; }
+    }
+}

src/Umbraco.Web/PropertyEditors/FileUploadConfiguration.cs

@@ -0,0 +1,15 @@
+using System.Collections.Generic;
+using Umbraco.Core.PropertyEditors;
+
+namespace Umbraco.Web.PropertyEditors
+{
+    /// <summary>
+    /// Represents the configuration for the file upload address value editor.
+    /// </summary>
+    public class FileUploadConfiguration : IFileExtensionsConfig
+    {
+
+        [ConfigurationField("fileExtensions", "Accepted file extensions", "multivalues")]
+        public List<FileExtensionConfigItem> FileExtensions { get; set; } = new List<FileExtensionConfigItem>();
+    }
+}

src/Umbraco.Web/PropertyEditors/FileUploadConfigurationEditor.cs

@@ -0,0 +1,14 @@
+using System.Collections.Generic;
+using Umbraco.Core;
+using Umbraco.Core.PropertyEditors;
+
+namespace Umbraco.Web.PropertyEditors
+{
+    /// <summary>
+    /// Represents the configuration editor for the file upload value editor.
+    /// </summary>
+    public class FileUploadConfigurationEditor : ConfigurationEditor<FileUploadConfiguration>
+    {
+
+    }
+}

src/Umbraco.Web/PropertyEditors/FileUploadPropertyEditor.cs

@@ -32,6 +32,10 @@ public FileUploadPropertyEditor(ILogger logger, IMediaFileSystem mediaFileSystem
             _uploadAutoFillProperties = new UploadAutoFillProperties(_mediaFileSystem, logger, contentSection);
         }
 
+
+        /// <inheritdoc />
+        protected override IConfigurationEditor CreateConfigurationEditor() => new FileUploadConfigurationEditor();
+
         /// <summary>
         /// Creates the corresponding property value editor.
         /// </summary>

src/Umbraco.Web/PropertyEditors/IFileExtensionConfig.cs

@@ -0,0 +1,13 @@
+using System.Collections.Generic;
+using Umbraco.Web.PropertyEditors;
+
+namespace Umbraco.Core.PropertyEditors
+{
+    /// <summary>
+    /// Marker interface for any editor configuration that supports defining file extensions
+    /// </summary>
+    public interface IFileExtensionsConfig
+    {
+        List<FileExtensionConfigItem> FileExtensions { get; set; }
+    }
+}

src/Umbraco.Web/PropertyEditors/IFileExtensionConfigItem.cs

@@ -0,0 +1,11 @@
+using Newtonsoft.Json;
+
+namespace Umbraco.Web.PropertyEditors
+{
+    public interface IFileExtensionConfigItem
+    {
+        int Id { get; set; }
+
+        string Value { get; set; }
+    }
+}

src/Umbraco.Web/Umbraco.Web.csproj

@@ -257,7 +257,13 @@
     <Compile Include="PropertyEditors\BlockListConfigurationEditor.cs" />
     <Compile Include="PropertyEditors\BlockListPropertyEditor.cs" />
     <Compile Include="Compose\NestedContentPropertyComposer.cs" />
+    <Compile Include="PropertyEditors\IFileExtensionConfigItem.cs" />
+    <Compile Include="PropertyEditors\FileExtensionConfigItem.cs" />
+    <Compile Include="PropertyEditors\IFileExtensionConfig.cs" />
     <Compile Include="PropertyEditors\ComplexEditorValidator.cs" />
+    <Compile Include="PropertyEditors\FileUploadConfiguration.cs" />
+    <Compile Include="PropertyEditors\FileUploadConfigurationEditor.cs" />
+    <Compile Include="PropertyEditors\IFileExtensionConfigItem.cs" />
     <Compile Include="PropertyEditors\ParameterEditors\MultipleMediaPickerParameterEditor.cs" />
     <Compile Include="PropertyEditors\RichTextEditorPastedImages.cs" />
     <Compile Include="PropertyEditors\Validation\ComplexEditorElementTypeValidationResult.cs" />