Material-UI LinearProgress bar not working

Question

I have a simple file upload utility, for which I am using react-dropzone, and in conjunction to that I wanted to use material-ui LinearProgress bar to show the progress.

Answer 1

Firstly, I think your problem might be this:

onDrop={this.onDrop}

should be

onDrop={files => this.onDrop(files)}

or...

onDrop={this.onDrop.bind(this)}

or...

constructor(props) {
  super(props);

  this.state = {
    completed: 0,
  };

  this.onDropHandler = this.onDrop.bind(this);
}

// ... then on your component:
onDrop={this.onDropHandler}

...otherwise, all your "this" references inside of onDrop() won't be correct, so "this.state" and "this.setState" would fail.

But also, you should never mutate your state directly. Always use setState(). So, remove all calls like this:

this.state.completed = ???;

always do this instead:

this.setState({ completed: ??? });

Also, setState is asynchronous. So, if you need to have something fired only after the state has been updated, you can pass a callback function as the 2nd argument:

this.setState({ completed: 75 }, () => { console.log('state.completed is now 75'));
// ^^ Immediately after the above call state.completed is probably not 75 yet,
// because setState() is async

Lastly, pay particular attention to your req.end() call. In there, you are only mutating the state (again, that's bad) and you are not calling .setState() at all (hence, the component won't be re-rendered after req.end() )