jszip
jszip copied to clipboard
Unhandled Rejection (TypeError): Right-hand side of 'instanceof' is not callable error with JSZip.loadAsync(f)
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:
-
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. -
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?