Unzip the file using JSzip and convert file to ArrayBuffer

Question

In the website, the user can upload a zip that contains one image and xml file. After upload the zip, the website will unzip the file and convert these file into ArrayBuffer. However, after the unzip, it gives me the object instead of file, and the fileReader can not work because of it.

Can anyone help me on this? The following is my code:

var zip = new JSZip();
zip.loadAsync(file.raw, {base64: true}).then(function(content) {
    var img = Object.entries(data.files).filter(([fileName]) =>
       fileName.endsWith('.png'),
    );
    var xml = Object.entries(data.files).filter(([fileName]) =>
       fileName.endsWith('.xml'),
    );
    var reader = new FileReader();
    reader.readAsArrayBuffer(img[0][1]);
    reader.onload = function(e){
       console.log(this.result)  
    }

});

I also tried console.log(img) and console.log(content), but the output is not expected.

console.log(img);
console.log(content);

// img Output:
(2) [Array(2), Array(2)]
0: (2) ["sample.png", i]
1: (2) ["__MACOSX/._sample.png", i]
length: 2
__proto__: Array(0)

// content Output:
i {files: {…}, comment: null, root: "", clone: ƒ}
clone: ƒ ()
comment: null
files:
sample.png: i {name: "sample.png", dir: false, date: Fri Jun 19 2020 01:04:54 GMT+0800 (中国标准时间), comment: null, unixPermissions: 33188, …}
sample.xml: i {name: "sample.xml", dir: false, date: Wed Jul 01 2020 21:56:20 GMT+0800 (中国标准时间), comment: null, unixPermissions: 33188, …}
__MACOSX/._sample.png: i {name: "__MACOSX/._sample.png", dir: false, date: Fri Jun 19 2020 01:04:54 GMT+0800 (中国标准时间), comment: null, unixPermissions: 33188, …}
__MACOSX/._sample.xml: i {name: "__MACOSX/._sample.xml", dir: false, date: Wed Jul 01 2020 21:56:20 GMT+0800 (中国标准时间), comment: null, unixPermissions: 33188, …}
__proto__: Object
root: ""
__proto__: Object

HelloMonster · Accepted Answer · 2020-07-02 03:13:14Z

1

Resolved the issue by following code:

zip.file(img[0][0]).async("arraybuffer")
.then(function(ArrayBuffer){
       console.log("Image ArrayBuffer: ");
        console.log(ArrayBuffer);
});

answered Jul 2, 2020 at 3:13

HelloMonster

397 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unzip the file using JSzip and convert file to ArrayBuffer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related