#226 - Restrict accepted mimetypes in file widget (#1246)

* #226 - Restrict accepted mimetypes in file widget

* Adding a test case for accept attribute on file widget

* #226 - Updated a documentation for file accept attribute

* Change text for file widget accept attribute

* Added grammatical things

.gitignore

@@ -124,6 +124,7 @@ yarn.lock
 
 # IDE
 .vscode
+.idea
 
 # Code coverage
 coverage

docs/form-customization.md

@@ -231,6 +231,28 @@ The included `FileWidget` exposes a reference to the `<input type="file" />` ele
 
 This allows you to programmatically trigger the browser's file selector, which can be used in a custom file widget.
 
+#### File widget options
+
+##### `accept` option
+
+You can use the accept attribute to specify a filter for what file types the user can upload:
+
+```jsx
+const schema = {
+  type: "string",
+  format: "data-url"
+};
+
+const uiSchema = {
+  "ui:options": { accept: ".pdf" }
+};
+
+render((
+  <Form schema={schema}
+        uiSchema={uiSchema} />
+), document.getElementById("app"));
+```
+
 ### Object fields ordering
 
 Since the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:

playground/samples/files.js

@@ -16,8 +16,17 @@ module.exports = {
           format: "data-url",
         },
       },
+      filesAccept: {
+        type: "string",
+        format: "data-url",
+        title: "Single File with Accept attribute",
+      },
+    },
+  },
+  uiSchema: {
+    filesAccept: {
+      "ui:options": { accept: ".pdf" },
     },
   },
-  uiSchema: {},
   formData: {},
 };

src/components/widgets/FileWidget.js

@@ -90,7 +90,7 @@ class FileWidget extends Component {
   };
 
   render() {
-    const { multiple, id, readonly, disabled, autofocus } = this.props;
+    const { multiple, id, readonly, disabled, autofocus, options } = this.props;
     const { filesInfo } = this.state;
     return (
       <div>
@@ -104,6 +104,7 @@ class FileWidget extends Component {
             defaultValue=""
             autoFocus={autofocus}
             multiple={multiple}
+            accept={options.accept}
           />
         </p>
         <FilesInfo filesInfo={filesInfo} />

test/StringField_test.js

@@ -1648,6 +1648,20 @@ describe("StringField", () => {
     });
 
     it("should render the widget with the expected id", () => {
+      const { node } = createFormComponent({
+        schema: {
+          type: "string",
+          format: "data-url",
+        },
+        uiSchema: {
+          "ui:options": { accept: ".pdf" },
+        },
+      });
+
+      expect(node.querySelector("[type=file]").accept).eql(".pdf");
+    });
+
+    it("should render the file widget with accept attribute", () => {
       const { node } = createFormComponent({
         schema: {
           type: "string",