jszip icon indicating copy to clipboard operation
jszip copied to clipboard

Unhandled Rejection (TypeError): Right-hand side of 'instanceof' is not callable error with JSZip.loadAsync(f)

Open DaCao opened this issue 3 years ago • 0 comments

I'm using React to build a simple input form page with Drop zone by which you can drop and upload a zip file:

class InputForm extends Component {
  constructor() {
    super()
  }

   ... other code

  async handleFile(files) {
    var f = files[0]
    this.state.zipfilename = files[0].name
    this.state.file = files[0]
    
    var zip = await JSZip.loadAsync(f)
    
    for (var filename in zip.files) {
      const one_file = zip.files[filename]
      console.log('--------- one_file ----------', one_file)
      try {

        ArrayBuffer = await one_file.async("arraybuffer")  // this line is causing the error

      } catch (error) {
        console.log(error)
      }
    }

  }

  render() {
    const { classes } = this.props
    return (
      <React.Fragment>

           ... other code          

          <Grid spacing={3} container>
            <Grid item xs={12}>
              <ReactDropZone handleFile={this.handleFile.bind(this)} />
            </Grid>
          </Grid>
      </React.Fragment>
    )
  }
}

When I do the following steps:

  1. Drag a zip file to the dropzone. This step works as expected. The file is recognized and the zip file is extracted. The line console.log('--------- one_file ----------', one_file) prints messages as it iterates through the files in the zip.

  2. Without any other actions, when I drag and drop another zip file, I get the following error:

Unhandled Rejection (TypeError): Right-hand side of 'instanceof' is not callable

async InputForm.handleFile
src/components/New/InputForm.js:180
  179 | 
> 180 | var zip = await JSZip.loadAsync(f)
      | ^  181 | var dataSet;
  182 | 
  183 | for (var filename in zip.files) {

I found out that after I comment out this line: ArrayBuffer = await one_file.async("arraybuffer") , the error no longer shows up and I can drag and drop many zip files in a row just fine.

So this line alone is causing the error when a second zip file is dropped to replace the first zip file.

I have no clue how to approach this issue right now.

Any suggestions?

DaCao avatar Sep 01 '21 05:09 DaCao