title: React ES6 Scope of Function Declaration
body: <p>I've looked around for several days and cannot seem to solve this. I have a form that handles a file upload via an XMLHTTPRequestUpload, I have an onProgress callback that I would like to call and update visually what's happening in the UI, but I can't seem to make any successful function calls from inside "onProgress". </p>
  
  <p>I tried to use console.log to find the scope in which my function updateProgress is defined. 'this' inside of the uploadFile, onProgress call is the XMLHTTP request itself. So I tried it for 'AddShow', the class itself. It doesn't report an error, and lists that updateProgress is a member function of the class, but when trying to call it, I still get </p>
  
  <pre><code>AddShow.updateProgress is not a function
      at XMLHttpRequestUpload.onProgress
  </code></pre>
  
  <p>So where's waldo? How do I call my function?</p>
  
  <p>Here's my entire React Component Class:</p>
  
  <pre><code>export class AddShow extends React.Component {
    constructor(props) {
      super(props);
  
      this.handleTextChange = this.handleTextChange.bind(this);
      this.uploadFile = this.uploadFile.bind(this);
      this.updateProgress = this.updateProgress.bind(this);
    }
  
    // function that updates the state of the form input
    handleTextChange(evt) {
      this.props.dispatch(actions.changeShowTitleText(evt.target.value));
    }
  
    //function that show the progress of file upload
    updateProgress(progress) {
      progress = Math.floor(progress * 100);
      //call the dispatch actions to update redux state
      this.props.dispatch(actions.changeCompleteValue(progress));
      this.props.dispatch(actions.changeCompleteText(progress + '%'));
      this.props.dispatch(actions.changeCompleteARIA(progress + ' percent'));
  
      // this.props.complete = progress;
      // this.props.completeText = progress + '%';
      // this.props.ariaCompleteText = progress + ' percent';
    }
  
    // when 'add show' is pressed, validate form and upload
    onSubmit(e) {
      e.preventDefault();
      let titleText = this.props.showTitle;
      if (titleText &lt; 1) {
        alert("Please provide a Show Title.");
      } else {
        // a title has been typed in, call upload with that info.
        this.uploadFile(titleText);
      }
    }
  
    //function that finally uploads the file given all the information
    uploadFile(title) {
      var uploader = new VimeoUpload({
        name: title,
        file: selectedFile,
        token: process.env.ACCESS_TOKEN,
        onProgress: function(data) {
          var percent = data.loaded / data.total;
          AddShow.updateProgress(percent);
        },
        onComplete: function(videoId, index) {
          var url = 'https://vimeo.com/' + videoId
        }
      });
  
      uploader.upload();
    }
  
    // set the global file variable if the input changes
    handleFileSelect(file) {
      console.log("These are the files retrieved", file.target.files[0]);
      selectedFile = file.target.files[0];
    }
  
    render() {
      var {dispatch, showTitle, complete, completeText, ariaCompleteText} = this.props;
      completeText = '0%';
      ariaCompleteText = "0 percent";
  
      return(
        &lt;div className="row"&gt;
          &lt;div className="column small-centered small-11 medium-8 large-6"&gt;
            &lt;div className="container"&gt;
              &lt;p&gt;Drag the Video You Want to Upload to Screen&lt;/p&gt;
              &lt;form ref="form" onSubmit={this.onSubmit.bind(this)} className="add-show-form"&gt;
                &lt;input type="file" placeholder="Select Video File" onChange={(evt) =&gt; this.handleFileSelect(evt)}/&gt;
                &lt;p ref="alertText"&gt;&lt;/p&gt;
                &lt;input type="text" value={this.props.showTitle} onChange={this.handleTextChange} placeholder="Show Title"/&gt;
                &lt;button className="button expanded"&gt;Add Show&lt;/button&gt;
              &lt;/form&gt;
              &lt;div className="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuetext={this.props.ariaCompleteText} aria-valuemax="100"&gt;
                &lt;span className="progress-meter" style={{width: this.props.complete + '%'}}&gt;
                  &lt;p className="progress-meter-text"&gt;{this.props.completeText}&lt;/p&gt;
                &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  };
  </code></pre>