OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Create a zip file from an array of png files

  • Thread starter Thread starter LucasL
  • Start date Start date
L

LucasL

Guest
Whenever I try to create a zip file using JSZip, I either get an error indicating the images may not be an instance of Blob (they are) or the result is corrupted/cannot be extracted.

I have a back-end API which returns a .png image given an id corresponding to the image from an authenticated endpoint. In a server component, I obtain a set of image ids from a separate endpoint, then map it to an array of .png images (as Blob objects, using await res.blob()). Then I create a zip file from these images using JSZip, which I return as a Buffer object. In a client component, I receive this Buffer object, create a Blob object from it, then an URL which I click.

The server component:

Code:
const download = async (file, format: string) => {
        "use server"

        const imageArray = await makeImageArray(file.id, format);

        const zip = new JSZip();

        await Promise.all(imageArray.map(async (rendered) => {
            console.log("blob", rendered.data)
            zip.file(`${rendered.name.replaceAll(" ", "_")}.${rendered.type}`, Buffer.from(await rendered.data.arrayBuffer()).toString("base64"), {base64: true});
            return rendered.data;
        }));
        const zipped = await zip.generateAsync({type: "blob"})
        const arrayBuffer = await zipped.arrayBuffer();
        const buffer = Buffer.from(arrayBuffer)
        return buffer
    }

The client component:

Code:
const clickAZip = async (file, format) => {
        const a = document.createElement("a");
        const zip = await onDownload(file, format)
        a.href = URL.createObjectURL(new Blob(zip,{type: 'application/zip'}))
        a.download=`${file.name}.zip`
        a.click()
    }

Note, the code here downloads a corrupted zip. If I replace rendered.data.arrayBuffer()).toString("base64") with rendered.data I get the following error in the server component: Internal error: Error: Can't read the data of 'Generic_image.png'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ?

<p>Whenever I try to create a zip file using JSZip, I either get an error indicating the images may not be an instance of Blob (they are) or the result is corrupted/cannot be extracted.</p>
<p>I have a back-end API which returns a .png image given an id corresponding to the image from an authenticated endpoint.
In a server component, I obtain a set of image ids from a separate endpoint, then map it to an array of .png images (as Blob objects, using <code>await res.blob()</code>). Then I create a zip file from these images using JSZip, which I return as a Buffer object.
In a client component, I receive this Buffer object, create a Blob object from it, then an URL which I click.</p>
<p>The server component:</p>
<pre><code>const download = async (file, format: string) => {
"use server"

const imageArray = await makeImageArray(file.id, format);

const zip = new JSZip();

await Promise.all(imageArray.map(async (rendered) => {
console.log("blob", rendered.data)
zip.file(`${rendered.name.replaceAll(" ", "_")}.${rendered.type}`, Buffer.from(await rendered.data.arrayBuffer()).toString("base64"), {base64: true});
return rendered.data;
}));
const zipped = await zip.generateAsync({type: "blob"})
const arrayBuffer = await zipped.arrayBuffer();
const buffer = Buffer.from(arrayBuffer)
return buffer
}
</code></pre>
<p>The client component:</p>
<pre><code>const clickAZip = async (file, format) => {
const a = document.createElement("a");
const zip = await onDownload(file, format)
a.href = URL.createObjectURL(new Blob(zip,{type: 'application/zip'}))
a.download=`${file.name}.zip`
a.click()
}
</code></pre>
<p>Note, the code here downloads a corrupted zip. If I replace <code>rendered.data.arrayBuffer()).toString("base64")</code> with <code>rendered.data</code> I get the following error in the server component:
<code>Internal error: Error: Can't read the data of 'Generic_image.png'. Is it in a supported JavaScript type (String, Blob, ArrayBuffer, etc) ?</code></p>
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top