title: Creating custom Input type file button in React
body: <p>I am trying to create custom <code>&lt;input type="file"&gt;</code> upload button with the name of the uploaded file visible on the button itself after the upload, in React. I am creating this as the component. I found it very difficult to create a codepen demo so I am just uploading the code here (sorry for that).</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import './InputFile.css';
  
  export default class InputFile extends Component {
  
  constructor(props: any)
  {
      super(props);
      this.getUploadedFileName = this.getUploadedFileName.bind(this);
  }
  
  getUploadedFileName(selectorFiles: FileList, props) {
  
  const { id } = this.props;
  
  ;( function ( document, window, index )
  {
      var inputs = document.querySelectorAll(`#${id}`);
      Array.prototype.forEach.call( inputs, function( input )
      {
          var label    = input.nextElementSibling,
              labelVal = label.innerHTML;
  
          input.addEventListener( 'change', function( e )
          {
              var fileName = '';
              if( this.files &amp;&amp; this.files.length &gt; 1 )
                  fileName = ( this.getAttribute( 'data-multiple-caption' ) || 
  '' ).replace( '{count}', this.files.length );
              else
                  fileName = e.target.value.split( '\\' ).pop();
  
              if( fileName )
                  label.querySelector( 'span' ).innerHTML = fileName;
              else
                  label.innerHTML = labelVal;
          });
  
          // Firefox bug fix
          input.addEventListener( 'focus', function(){ input.classList.add( 
  'has-focus' ); });
          input.addEventListener( 'blur', function(){ input.classList.remove( 
  'has-focus' ); });
      });
  }( document, window, 0 ));
  }
  
  
  render () {
  
      const { id, text, multiple } = this.props;
  
      return(
          &lt;div&gt;
              &lt;input id={id} type="file" className="km-btn-file" data-multiple-caption="{count} files selected" multiple={multiple} onChange={ (e, id) =&gt; this.getUploadedFileName(e.target.files, id)}&gt;&lt;/input&gt;
              &lt;label htmlFor={id} className="km-button km-button--primary km-btn-file-label"&gt;
                  &lt;span&gt;{text}&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      );
  }
  }
  
  InputFile.propTypes = {
      id: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
      multiple: PropTypes.string,
  };
  </code></pre>
  
  <p>I am importing this component in my other file <code>&lt;InputFile id={'input-file'} text={'Upload File'} multiple={'multiple'}/&gt;</code></p>
  
  <p>Here is the CSS code </p>
  
  <pre><code>.km-button--primary {
      background-color: #5C5AA7;
      color: #FFFFFF;
  }
  .km-button {
      border-radius: 3px;
      -webkit-appearance: none;
      border: none;
      outline: none;
      background: transparent;
      height: 36px;
      padding: 0px 16px;
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      min-width: 70px;
      transition: all 0.3s ease-out;
  }
  .km-btn-file {
      width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    .km-btn-file-label {
      line-height: 36px;
      cursor: pointer;
    }
  </code></pre>
  
  <p>The problem I am facing is when I click on the button first time and choose a file to upload it selects the file but does not update the text "Upload File" with the name of the file. But after the click it the second time it works fine. I don't know why that is happening and for that I need help.</p>
  
  <p>Thanks.</p>