I am trying to make it so that if a zip file is chosen from a file dialog, it will unzip it and pass the unzipped result to the readAsDataURL method. However whenever I choose a zip file to do this, I get:
Uncaught (in promise) TypeError: Failed to fetch
Why is this happening and how can I fix it?
Below is a snippet you can run, open your web inspector, and try selecting a local .zip file.
const unzip = async (blob) => {
let stream = new DecompressionStream('deflate');
const decompressedStream = blob.stream().pipeThrough(stream);
return await new Response(decompressedStream).blob();
};
const opener = document.getElementById('open');
opener.addEventListener('change', async () => {
let [file] = opener.files;
if (!file) { return; }
if (file.type === 'application/zip') {
file = await unzip(file);
}
const reader = new FileReader();
reader.addEventListener('load', () => {
const data = reader.result.split(',')[1];
console.log('your contents are', data);
});
reader.readAsDataURL(file);
});<html>
<body>
<input id="open" type="file" />
</body>
</html>