Unable to extract all images from zip file using jszip

Question

0.00/5 (No votes)

See more:

By using the below code i am able to download 10 images only.But actually that ZIp folder contains approx 450 images.

What I have tried:

function unzipfeb146() {
            var i = 0;
           // fetch('file:///C:/CBTOffline/Images/8687.Zip')
            fetch('http://localIP/CBT/R3Images/QBQuestionImages/8688.zip')
                .then(response => response.arrayBuffer())
                .then(data => {
                    // Extract the files from the zip
                    const zip = new JSZip();
                    return zip.loadAsync(data);
                })
                .then(zip => {
                    // Download each file
                    Object.keys(zip.files).forEach(filename => {
                        debugger;
                        zip.files[filename].async('blob').then(blob =>
                        {
                            const link = document.createElement('a');
                            link.href = URL.createObjectURL(blob);
                            link.download = filename;
                            document.body.appendChild(link);
                            link.click();
                           

                            var img = document.createElement("img");
                            img.src = URL.createObjectURL(blob);
                            img.id = i+1;
                            document.body.appendChild(img);
                            i = i + 1;
                            //const image = new Image();
                            //image.src = URL.createObjectURL(blob);
                            //image.id = fileName;
                            //document.body.appendChild(image);

                            //document.body.removeChild(link);
                        });
                    });
                })
                .catch(error => console.error(error));
        }

Posted 16-Feb-23 22:06pm

niveditha22

Updated 17-Feb-23 3:32am

v2

Add a Solution

Comments

Chris Copeland 17-Feb-23 5:11am

I couldn't find anything specific online but what I would guess is that this could be a browser security feature. In no way should any website be forcing the user to download that many individual files, it's no surprise that the browser has limited it to 10. I would check the developer console, no doubt you could see some warnings/errors about too many "createObjectURL" references or similar.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Answer 1 · 2023-02-17T03:32:00

As Chris has mentioned, the browser's download behavior's might be your problem. Some browsers may prevent automated downloading of multiple files for security reasons, so you may need to implement a way for the user to initiate the download for each file.
Another issue might be that not all the files have a valid image extension i.e. jpg, png etc.
Using your code above, you can try the following function that includes checking for image extensions -

function unzipfeb146() {
  fetch('http://localIP/CBT/R3Images/QBQuestionImages/8688.zip')
    .then(response => response.arrayBuffer())
    .then(data => JSZip.loadAsync(data))
    .then(zip => {
      // Filter the files to only include image files
      const imageFiles = Object.keys(zip.files)
        .filter(filename => /\.(jpe?g|png|gif)$/i.test(filename));

      // Download each image file
      imageFiles.forEach((filename, index) => {
        zip.file(filename)
          .async('blob')
          .then(blob => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            const img = document.createElement('img');
            img.src = URL.createObjectURL(blob);
            img.id = `image-${index}`;
            document.body.appendChild(img);
          });
      });
    })
    .catch(error => console.error(error));
}

Quadratka · Answer 2 · 2023-09-06T05:49:00

Try to revoke the object after .src be assigned:

Quote:
const objectURL = URL.createObjectURL(targetFile);
mediaElem.src = objectURL;
window.URL.revokeObjectURL(objectURL);

or

Quote:
const fileReader = new FileReader();
fileReader.onload = (evt) => {
mediaElem.src = evt.target.result;
};
fileReader.readAsDataURL(targetFile);

to avoid using createObjectURL at all?

Unable to extract all images from zip file using jszip

2 solutions

Solution 2

Solution 3

Add your solution here

Preview 0