title: Allow just a type of file to be uploaded using React.js
body: <p>I am using in my application an uploader from Ant Design.</p>
  <pre><code>function beforeUpload(file) {
    const filesFormats = [&quot;.doc&quot;, &quot;.docx&quot;, &quot;application/pdf&quot;];
    console.log(file);
    const isRightFormat = filesFormats.includes(file.type);
    console.log(isRightFormat);
    if (!isRightFormat) {
      message.error(&quot;You can only upload pdf and doc files&quot;);
      return;
    }
    const isLt2M = file.size / 1024 / 1024 &lt; 2;
    if (!isLt2M) {
      message.error(&quot;Image must smaller than 2MB!&quot;);
    }
    return isRightFormat &amp;&amp; isLt2M;
  }
  
  class Avatar extends React.Component {
    state = {
      loading: false
    };
  
    handleChange = (info) =&gt; {
      console.log(&quot;info, &quot;, info);
      if (info.file.status === &quot;uploading&quot;) {
        this.setState({ loading: true });
        return;
      }
  
      if (info.file.status === &quot;done&quot;) {
        // Get this url from response in real world.
        this.setState({ loading: false });
      }
    };
  
    render() {
      const { loading } = this.state;
      const uploadButton = (
        &lt;div&gt;
          {loading ? &lt;LoadingOutlined /&gt; : &lt;PlusOutlined /&gt;}
          &lt;div style={{ marginTop: 8 }}&gt;Upload&lt;/div&gt;
        &lt;/div&gt;
      );
      return (
        &lt;Upload
          name=&quot;avatar&quot;
          listType=&quot;picture-card&quot;
          className=&quot;avatar-uploader&quot;
          showUploadList={true}
          action=&quot;https://www.mocky.io/v2/5cc8019d300000980a055e76&quot;
          beforeUpload={beforeUpload}
          onChange={this.handleChange}
        &gt;
          {uploadButton}
        &lt;/Upload&gt;
      );
    }
  }
  </code></pre>
  <p>What I am trying to do is to restrict some formats of files that can be uploaded. For example, images should't be uploaded according to my restriction:</p>
  <pre class="lang-js prettyprint-override"><code>const filesFormats = [&quot;.doc&quot;, &quot;.docx&quot;, &quot;application/pdf&quot;];
  console.log(file);
  const isRightFormat = filesFormats.includes(file.type);
  console.log(isRightFormat);
  if (!isRightFormat) {
    message.error(&quot;You can only upload pdf and doc files&quot;);
    return;
  }
  </code></pre>
  <p>The code works but when I upload an image, it still appears in the uploader icon as a list item, but it should't be possible, because I set the restriction.</p>
  <p>Why does it happen and how to achieve what I described above?</p>
  <p><a href="https://codesandbox.io/s/avatar-antd4100-forked-ejveb?file=/index.js:220-1624" rel="nofollow noreferrer">Codesandbox link</a></p>