Set component state, from unreachable variable

Question

How I can get media.duration to live in a state environment ?

Right now I don't have access to it, even after trying to change state

  handleClick(e) {
        e.preventDefault();

    var reader = new FileReader();
    reader.readAsDataURL(this.state.uploadedFile);
    reader.onload = function() {
      var media = new Audio(reader.result);
      media.onloadedmetadata = function() {
        console.log(media.duration); // <-- THIS WORKS!!!!!!!!!!!!!!
      };
    };
    console.log(media.duration) //<------THIS DOES NOT WORK!!!!!!!!!!
    console.log("The link was clicked.");
    console.log(this.state.duration);
}

from: How to get duration of video when I am using filereader to read the video file?

_________________________________________

I tried this but it did not work

    this.setState({duration:media.duration},()=>{
console.log(this.state.duration)
})

score 0 · Accepted Answer · answered Aug 28 '19 at 03:25

0

It's because you use media variable is out of the scope. Please try this one.

handleClick(e) {
    e.preventDefault();
    var reader = new FileReader();
    reader.readAsDataURL(this.state.uploadedFile);
    reader.onload = () => {
      var media = new Audio(reader.result);
      media.onloadedmetadata = () => {
        console.log(media.duration); // <-- THIS WORKS!!!!!!!!!!!!!!
        this.setState({duration: media.duration});
      };
    };
}

answered Aug 28 '19 at 03:25

freedev111

132
4

up for way too long coding today – azuldev Aug 28 '19 at 03:31
`"out of scope"` - how about if `media.duration` is accessed inside `reader.onload()`? – Joseph D. Aug 28 '19 at 03:42
It is possible but you should be careful because you can read duration data before loading media file. – freedev111 Aug 28 '19 at 03:45
so why does `setState()` need to be inside the callback rather than just inside `reader.onload()`? :) – Joseph D. Aug 28 '19 at 03:45
You have to read duration data after loading file is ended. SO I use setState function inside onloadedmetadata function. If you don't, you will get incorrect value. – freedev111 Aug 28 '19 at 03:47

Set component state, from unreachable variable

_________________________________________

1 Answers1