Download a collection of base64 images as a ZIP file in Angular 4

I am currently developing an Angular2 v4 app using Typescript and I'm looking for a solution to download multiple images (in base64 format) as a Zip file.

For instance, I have a sample array like this (containing fake base64 images just for illustration purposes)

data = [
  'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA ...',
  'data:image/png;base64, iVBTYu0KGgoBBBBNSUhYUgJJJJUA ...',
  'data:image/png;base64, CGBHHFGY0goAAAANSUhEUgAAAAUA ...',
  ...
]

I require a method to download these images by first converting each one to a .jpg or .png file, then compiling all the images and downloading them as a zip file. The concept is demonstrated below:

downloadZip() {
  const arrayAsJPG = [];
  this.data.forEach(i => {
    const imageInJpg = i.convertToJPGfile(); // This function converts base64 to JPG file
    arrayAsJPG.push(imageInJpg);
  });
  ZipFileSaver.save(arrayAsJPG, 'myImageReport.zip'); // This is a conceptual representation of what I need

}

Is there a way to achieve this task efficiently?

Answer №1

@gary provided a clear and helpful explanation. I came across some examples on stackoverflow:

Is it feasible to create a zip file for download in Angular 4?

Converting base64 data to blob in javascript You can also utilize @types/jszip.

I created an example that accomplishes the following:

  • Retrieving the array from an API (mock) as you specified;
  • Converting each item in that array to a blob;
  • Adding the blob as a file to the zip archive;
  • Lastly, creating the zip file;
  • I had only png base64 data so I changed it to jpg.

https://stackblitz.com/edit/angular-jzqtrk?file=src%2Fapp%2Fapp.component.ts

Answer №2

One possible solution is to implement this functionality on a Node server.

You are faced with two main challenges:

Converting the data string into an image

Performing this task in a web browser can be complex. One approach is to display the data string as an image tag's source and then use JavaScript to trigger the image download. However, saving it to disk for future use with a zip file utility may not be feasible within the browser. This process would be much simpler to accomplish using Node.js.

Creating a zip file

To tackle this challenge, it is recommended to utilize an NPM package that is designed for Node.js environments. While most packages are tailored specifically for Node, there are possibilities to create zip files directly in the browser by exploring libraries such as JSZip. Additionally, conducting a search on Google for "npm zip" will yield numerous other package options to consider.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to troubleshoot a quasar typescript file type error?

Currently, I am delving into Quasar using TypeScript and encountering a type error while working on file uploads. Here is the snippet of my code where the type error arises specifically in the parameter of the form.append() method. The error message read ...

How can I display a modal with image options and image selection using Ionic 4?

Currently, I am developing an Ionic 4 Angular application and implementing an Ionic modal feature. I would like to include images in the modal, so that when a user clicks on them, they are displayed. ...

Angular2 Event:keyup triggers the input to lose focus

I am working on a component with an input element that is bound to a property. I want the input field to update in real time as I type in it. Here is my current code: <input type="text" #updatetext [value]="item.name" (keyup)="updateItem(item.$key, up ...

employing a parameterized type to accommodate a combination of two diverse items as input

I am facing a challenge with a simple use case and have been unable to find an example that covers it adequately. The situation is this: I have a function that should accept two different objects that are very similar. Therefore, I want to use a generic t ...

In a local setting, the KendoUI chips are displaying without their borders

I recently tested out the code from kendo on StackBlitz and it worked perfectly: https://i.stack.imgur.com/Nrp2A.png However, when running the same code on my localhost, all the styling for the chip is missing: https://i.stack.imgur.com/1pUH9.png The c ...

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

Issues encountered when trying to upload images to Firestore Storage

I am attempting to upload an image and store its URL in a Firestore document. To achieve this, I have the following code snippet: This function uses the device camera to capture the photo. selectImage(): Promise<any> { return new Promise(resolv ...

How should one go about properly sizing and formatting image icons?

Currently, I'm exploring the most efficient ways to optimize image loading speed on a webpage. Specifically, I am looking for advice on the best method for resizing an image from 1600x900 to 890x500. Method 1 Utilize the following code: <img src= ...

Instead of relying on traditional AJAX for receiving remote commands, consider using a new Image object in your code like this: `var

How efficient is the following method: var i = new Image(); i.src = 'http://secondary.domain.com/command.gif?command=somecmd&rand=' + ...epoch time....; ... utilizing mod_rewrite to redirect the above URL to a PHP script ... Is this an effe ...

Create an interactive and responsive user interface for Object using the Angular framework

After receiving a JSON Object from an API call with multiple string values, I need to create an Interface for this Object in the most efficient way possible. Rather than manually writing an Interface with 100 keys all of type string, is there a quicker a ...

Extracting values from an *ngFor loop in Angular 8 - Here's how to do

Currently, I am utilizing *ngFor to display some data. I have a requirement to extract a specific value from *ngFor and display it in, for instance, my heading. However, when I attempted to use {{ project }}, it consistently returned undefined. Despite hav ...

Utilizing the adapter design pattern in Angular with TypeScript for enhancing a reactive form implementation

I've been struggling to understand how to implement the adapter pattern in Angular6. Despite reading numerous articles and tutorials, I still can't quite grasp the concept. Could someone provide some insights on this topic? Essentially, I have a ...

Using WebdriverIO with Angular to create end-to-end tests in TypeScript that involve importing classes leads to an error stating "Cannot use import statement outside a module."

I am facing an issue while trying to set up a suite of end-to-end tests using wdio. Some of the tests utilize utility classes written in TypeScript. During the compilation of the test, I encountered the following error: Spec file(s): D:\TEMP\xx& ...

TypeScript PatchBaseline with AWS CDK

I am currently working with the AWS CDK and TypeScript, utilizing the @aws-cdk/aws-ssm library to create a PatchBaseline. While I have successfully created the Patch baseline, I'm encountering difficulties when attempting to define approvalRules. I ca ...

The specified type 'IterableIterator<number>' does not belong to either an array type or a string type

Encountering an error while attempting to generate a dynamic range of numbers. Error: Type 'IterableIterator<number>' is not recognized as an array or string type. Use the compiler option '--downlevelIteration' to enable iteratio ...

The practice of following the UpperCamelCase convention post object transformation

I encountered a situation where I have an object that returned the result from an RxJs subscribe method: result: any { message: null role: Object success: true } To better manage this object in TypeScript, I decided to convert it to a type ca ...

Having difficulty grasping the concept of a component in Angular that utilizes a service which incorporates the HttpModule

I just started learning Angular and I'm grappling with a testing issue. After studying how the framework functions, I noticed that a component using a service which incorporates HttpModule requires the HttpModule to be imported in the component test ...

Exploring Angular 2: The Power of HTTP Observables for Managing Asynchronous Operations. Exploring the

When working with a form that fetches data using an http observable, I encountered the need to disable the submit button while awaiting the response. Currently, I am setting the status code on each component/form to indicate running before calling the sub ...

Comparing NativeScript and Flutter

Currently diving into the world of Native Script with Angular, I am fascinated by the code sharing capabilities that allow me to work on both web and mobile applications. However, a lingering question in my mind is why Google chose to develop Angular for ...

Is it possible to import in TypeScript using only the declaration statement?

Is there a way to use a node module in TypeScript without explicitly importing it after compilation? For example: I have a global variable declared in a file named intellisense.ts where I have: import * as fs from 'fs'; Then in another file, ...