CODEWITHSUNDEEP
javascriptreactjsstatefilereader
Marcelo Andrade Silva
Marcelo Andrade Silva

Reputation: 31

File Reader is slow and not set state on React

When converting a. pdf file to Base64, I need to be filled in my state, but for some reason my conversion is slower than my setstate, which when being seted is always empty.

My code

async transformBase64(inputFile) {    
    return new Promise((resolve, reject) => {
      var fileReader = new FileReader();
      fileReader.readAsDataURL(inputFile)
      if (fileReader.result != undefined){
        resolve(this.setState({ Base64: fileReader.result }), () => {});                
      }else{
        reject("Err")
      }            
    });
  }

What can I do to solve my problem?

Upvotes: 2

Views: 1855

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

It looks like you're not setting up an onload callback for your fileReader. This is needed to correctly signal back to your application that file data has loaded and is ready, seeing that the FileReader API is asynchronous.

Consider apply the following changes to your code to resolve your problem:

async transformBase64(inputFile) {    

    return new Promise((resolve, reject) => {

      var fileReader = new FileReader();

      // If error occurs, reject the promise
      fileReader.onerror = () => {
          reject("Err")
      }

      // Define an onload handler that's called when file loaded
      fileReader.onload = () => {

        // File data loaded, so proceed to call setState
        if (fileReader.result != undefined){
          resolve(this.setState({ 
             Base64: fileReader.result 
          }), () => {});                
        }else{
          reject("Err")
        }  
      }

      fileReader.readAsDataURL(inputFile)

    });
  }

Upvotes: 3

Related Questions