title: React JS Image Uploader | Change Background Image
body: <p>I'm trying create a background image updater / uploader component. </p>
  
  <p>An image is set on default however, if the user would like to update the background image I would like to update the state and store the image. </p>
  
  <p>Research so far suggests I need to use the <code>&lt;input type="file" /&gt;</code> element to enable the upload dialog box. </p>
  
  <p>Is there another way around not using the input element? If the user is to click on the <code>&lt;button&gt;</code> element to show the dialog box and then update the background image. </p>
  
  <pre><code>export default class ChangeBackground extends React.Component {
      constructor() {
          super();
          this.state = {
              backgroundImage: ''
          }
      }
  
      handleBackgroundChange() {
          let backgroundImage = backgroundImage
          this.setState({
              backgroundImage: backgroundImage
          });
      }
  
      render() {
          return (
              &lt;div className="change-bg-wrap"&gt;
                  &lt;input type="file" accept="image/*" /&gt;
                  &lt;button&gt;
                      &lt;i className="fa fa-picture-o" style={{fontSize: 20}}&gt;&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>