feat: allow to set custom attributes for input

Author: AidasK

README.md

@@ -132,8 +132,13 @@ parameter must be adjusted together with `progressCallbacksInterval` parameter.
 
 #### Methods
 
-* `.assignBrowse(domNodes, isDirectory, singleFile)` Assign a browse action to one or more DOM nodes. Pass in `true` to allow directories to be selected (Chrome only, support can be checked with `supportDirectory` property).
-To prevent multiple file uploads set singleFile to true.
+* `.assignBrowse(domNodes, isDirectory, singleFile, attributes)` Assign a browse action to one or more DOM nodes.
+  * `domNodes` array of dom nodes or a single node.
+  * `isDirectory` Pass in `true` to allow directories to be selected (Chrome only, support can be checked with `supportDirectory` property).
+  * `singleFile` To prevent multiple file uploads set this to true. Also look at config parameter `singleFile`.
+  * `attributes` Pass object of keys and values to set custom attributes on input fields.
+  For example, you can set `accept` attribute to `image/*`. This means that user will be able to select only images.
+  Full list of attributes: http://www.w3.org/TR/html-markup/input.file.html#input.file-attributes
 Note: avoid using `a` and `button` tags as file upload buttons, use span instead.
 * `.assignDrop(domNodes)` Assign one or more DOM nodes as a drop target.
 * `.on(event, callback)` Listen for event from Flow.js (see below)

src/flow.js

@@ -344,9 +344,12 @@
      * @param {Element|Array.<Element>} domNodes
      * @param {boolean} isDirectory Pass in true to allow directories to
      * @param {boolean} singleFile prevent multi file upload
+     * @param {Object} attributes set custom attributes:
+     *  http://www.w3.org/TR/html-markup/input.file.html#input.file-attributes
+     *  eg: accept: 'image/*'
      * be selected (Chrome only).
      */
-    assignBrowse: function (domNodes, isDirectory, singleFile) {
+    assignBrowse: function (domNodes, isDirectory, singleFile, attributes) {
       if (typeof domNodes.length === 'undefined') {
         domNodes = [domNodes];
       }
@@ -379,6 +382,9 @@
         if (isDirectory) {
           input.setAttribute('webkitdirectory', 'webkitdirectory');
         }
+        each(attributes, function (value, key) {
+          input.setAttribute(key, value);
+        });
         // When new files are added, simply append them to the overall list
         var $ = this;
         input.addEventListener('change', function (e) {