Merge pull request #1181 from aviriel/FileSelectFilterMimeType

New attribute for FileSelect control to filter allowed file MIME-types

aikau/src/main/resources/alfresco/forms/controls/FileSelect.js

@@ -25,34 +25,45 @@
 define(["alfresco/forms/controls/BaseFormControl",
         "dojo/_base/declare",
         "alfresco/html/FileInput",
-        "dojo/_base/lang"], 
+        "dojo/_base/lang"],
         function(BaseFormControl, declare, FileInput, lang) {
-   
+
    return declare([BaseFormControl], {
-      
+
       /**
        * Configuring this attribute to be true will result in the wrapped [FileInput]{@link module:alfresco/html/FileInput}
        * widget being recreated each time that file or files are selected. This option was added to support a specific
        * use case, see https://issues.alfresco.com/jira/browse/AKU-834 for details.
-       * 
+       *
        * @instance
        * @type {boolean}
        * @default
        * @since 1.0.57
        */
       recreateControlOnSelect: false,
 
+      /**
+       * The accept attribute to specify the types of files to accept (that can be submitted through a file upload).
+       * By default accept all file types. Possible values: ".gif, .jpg, .png, .doc" or other file extensions, "application/vnd.openxmlformats-officedocument.wordprocessingml.document, .application/msword" and other MIME-types, "audio/*, video/*, image/*".
+       * @instance
+       * @type {string}
+       * @default
+       * @since 1.0.79
+       */
+      filterMimeType: "",
+
       /**
        * @instance
        */
       getWidgetConfig: function alfresco_forms_controls_FileSelect__getWidgetConfig() {
          // Return the configuration for the widget
          return {
             id : this.generateUuid(),
-            name: this.name
+            name: this.name,
+            filterMimeType: this.filterMimeType
          };
       },
-      
+
       /**
        * @instance
        */
@@ -69,19 +80,20 @@ define(["alfresco/forms/controls/BaseFormControl",
       recreateControl: function alfresco_forms_controls_FileSelect__recreateControl() {
          var config = {
             id: this.wrappedWidget.id,
-            name: this.name
+            name: this.name,
+            filterMimeType: this.filterMimeType
          };
          this.wrappedWidget.destroy();
          this.wrappedWidget = this.createFormControl(config);
          this.wrappedWidget.placeAt(this._controlNode);
          this.setupChangeEvents();
       },
-      
+
       /**
        * Overrides the default change events to use blur events on the text box. This is done so that we can validate
        * on every single keypress. However, we need to keep track of old values as this information is not readily
        * available from the text box itself.
-       * 
+       *
        * @instance
        */
       setupChangeEvents: function alfresco_forms_controls_FileSelect__setupChangeEvents() {
@@ -104,4 +116,4 @@ define(["alfresco/forms/controls/BaseFormControl",
          }
       }
    });
-});
+});

aikau/src/main/resources/alfresco/html/FileInput.js

@@ -21,40 +21,40 @@
  * This widget represents an input HTML element of type "file". It is used for selecting files
  * from the operating system, typically for the purpose of uploading. It is wrapped by the
  * [FileSelect]{@link module:alfresco/forms/controls/FileSelect} form control.
- * 
+ *
  * @module alfresco/html/FileInput
  * @extends external:dijit/_WidgetBase
  * @mixes external:dojo/_TemplatedMixin
  * @mixes module:alfresco/core/Core
  * @author Dave Draper
  */
 define(["dojo/_base/declare",
-        "dijit/_WidgetBase", 
+        "dijit/_WidgetBase",
         "dijit/_TemplatedMixin",
         "dojo/text!./templates/FileInput.html",
-        "alfresco/core/Core"], 
+        "alfresco/core/Core"],
         function(declare, _WidgetBase, _TemplatedMixin, template, AlfCore) {
-   
+
    return declare([_WidgetBase, _TemplatedMixin, AlfCore], {
 
       /**
        * An array of the i18n files to use with this widget.
-       * 
+       *
        * @instance
        * @type {object[]}
        * @default [{i18nFile: "./i18n/Label.properties"}]
        */
       i18nRequirements: [{i18nFile: "./i18n/FileInput.properties"}],
-      
+
       /**
        * An array of the CSS files to use with this widget.
-       * 
+       *
        * @instance cssRequirements {Array}
        * @type {object[]}
        * @default [{cssFile:"./css/Label.css"}]
        */
       cssRequirements: [{cssFile:"./css/FileInput.css"}],
-      
+
       /**
        * The HTML template to use for the widget.
        * @instance
@@ -64,13 +64,23 @@ define(["dojo/_base/declare",
 
       /**
        * The label to display.
-       * 
+       *
        * @instance
        * @type {string}
        * @default
        */
       label: "",
 
+      /**
+       * The accept attribute to specify the types of files to accept (that can be submitted through a file upload).
+       * By default accept all file types. Possible values: ".gif, .jpg, .png, .doc" or other file extensions, "application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/msword" and other MIME-types, "audio/*, video/*, image/*".
+       * @instance
+       * @type {string}
+       * @default
+       * @since 1.0.79
+       */
+      filterMimeType: "",
+
       /**
        * This returns the files attribute of the input element
        *
@@ -87,4 +97,4 @@ define(["dojo/_base/declare",
          return value;
       }
    });
-});
+});

aikau/src/main/resources/alfresco/html/templates/FileInput.html

@@ -1 +1 @@
-<input class="alfresco-html-FileInput" type="file" multiple></input>
+<input class="alfresco-html-FileInput" type="file" multiple accept="${filterMimeType}"></input>

aikau/src/test/resources/testApp/WEB-INF/classes/alfresco/site-webscripts/alfresco/forms/controls/FileSelect.get.js

@@ -48,6 +48,19 @@ model.jsonModel = {
                                  initialValue: true
                               }
                            }
+                        },
+                        {
+                           id: "FILE_SELECT",
+                           name: "alfresco/forms/controls/FileSelect",
+                           config: {
+                              label: "File(s) selector (filtered to accept only doc/docx documents)",
+                              name: "files_field",
+                              value: "",
+                              requirementConfig: {
+                                 initialValue: true
+                              },
+                              filterMimeType: ".doc, .docx, application/vnd.openxmlformats-officedocument.wordprocessingml.document, .application/msword"
+                           }
                         }
                      ]
                   }
@@ -59,4 +72,4 @@ model.jsonModel = {
          name: "alfresco/logging/DebugLog"
       }
    ]
-};
+};