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

Minimize the quantity of data points displayed along the X-axis in a highcharts graph

After making an API call, I received data for a Highcharts graph consisting of an array of datetimes (in milliseconds) and corresponding values (yAxis). The data is fetched every 15 minutes and displayed on a mobile device. When viewing the data monthly, ...

What is the best way to retrieve class members using component properties?

I am looking to implement a mixin for setting the header and meta data in my project. I recently discovered vue-meta, which seems to work really well for this purpose. However, I am still getting acquainted with TypeScript and class-based components. How ...

Using JavaScript to assign function arguments based on arbitrary object values

I am facing a challenge with a collection of arbitrary functions and a method that takes a function name along with an object or array of parameters to call the respective function. The issue arises from the varying number of inputs in these functions, som ...

NextJS is currently unable to identify and interpret TypeScript files

I am looking to build my website using TypeScript instead of JavaScript. I followed the NextJS official guide for installing TS from scratch, but when I execute npm run dev, a 404 Error page greets me. Okay, below is my tsconfig.json: { "compilerOption ...

Learn how to generate specific error messages based on the field that caused the failure of the @Column({ unique: true }) Decorator. Error code 23505

Hey there! I'm currently facing an issue while trying to handle Sign Up exceptions in my code. I want to inform the user if their username OR email is already in use. Although using the decorator @Column({ unique: true}) allows me to catch error 23505 ...

Tips on obtaining data from ion-select and presenting it in a label

I'm having a problem with dynamic binding in my drop-down. I can't seem to display the default selected value in the label, and when I change the selection, the new value isn't showing up either. Take a look at my code below: <p>{{l ...

TypeScript issue encountered with parseInt() function when used with a numeric value

The functionality of the JavaScript function parseInt allows for the coercion of a specified parameter into an integer, regardless of whether that parameter is originally a string, float number, or another type. While in JavaScript, performing parseInt(1. ...

When using TypeScript, the tls.TLSSocket() function may trigger an error mentioning the absence of a "socket" parameter

Currently, I am in the process of building a basic IRC bot and using raw sockets to connect to the IRC server. Initially written in plain Javascript, I am now transitioning it to TypeScript. However, I have encountered an unusual issue when attempting to c ...

Angular-cli and Chrome extension compatibility causing unexpected UI problems post-build

I developed an application with a sticky header at the top using angular2 mdl layouts. Recently, I made changes to the code to create a more customizable header. However, after building the app (ng build) and importing it as an unpacked extension, the con ...

Loop through the array while handling a promise internally and ensure completion before proceeding

I am currently working on populating a response array with Firestore snapshots and creating download links for stored files within each snapshot. Despite trying various solutions involving Promises, the response array consistently ended up being null. do ...

Exploring Functions in Object Literal Notation in TypeScript: Why is the Context of 'this' Assigned as Type 'any'?

It appears that the question has been posed before, but my search yielded no results. The issue at hand seems rather straightforward. TypeScript integrates well with object literal notation, however, when methods are defined within, it struggles to handle ...

Angular: Changing the class of a parent element dynamically while iterating through a list with ngFor

I have a unique challenge where I am trying to style a checkbox as a button by placing it inside its label. <label> <input type="checkbox" name="..."> </label> My goal is to toggle the parent label's class based on whether the che ...

Exploring Angular's search functionalities using reactive forms

Hey there! I'm in need of some assistance. I'm currently attempting to perform a live search for elements that are both alive and responsive to case sensitivity when searching. My array, called elementsArray, contains fields such as: id, name, an ...

Uploading images using the power of Angular and Node.js

I have been struggling with a persistent issue for quite some time now, and I have not been able to find a solution anywhere. My goal is to allow users to update their avatars on their profiles. However, every time I attempt to pass the file to my node ser ...

Ways to exit a loop in TypeScript

I've encountered an issue with the following code where I am struggling to break the loop under certain conditions. Desired Outcome: An error message should display, allowing the user to close it and remove the escalation node correctly. Actual Outc ...

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

The issue appears to be trapped in a loop: package.json is missing type: "module". This results in an error when trying to use modules in TypeScript files: An error occurred while running the seed command: /Users/me/code/me/prisma-learning/grap ...

Exploring the zoom functionality and tooltip features of Area Range charts in Highcharts

I need help with a couple of things on the high charts area range chart: I am trying to enable zooming into the y-axis of the chart, but I am facing difficulties. Can anyone suggest how this can be achieved? Below is the link to my jsfiddle with the sam ...

Incorporating a minute interval in Angular Material's time picker feature

In my Angular 15 project, I am working with this material component. <mat-form-field appearance="outline"> <mat-label>{{'DOCTOR_AREA.START_TIME' | translate}} </mat-label> ...

Search through an array of objects and assign a new value

I am facing a challenge with an array of objects structured as shown below: [ { "e_id": "1", "total": 0 }, { "e_id": "3", "total": 0 } ] My objecti ...

Having issues with Craco not recognizing alias configuration for TypeScript in Azure Pipeline webpack

I am encountering an issue with my ReactJs app that uses Craco, Webpack, and Typescript. While the application can run and build successfully locally, I am facing problems when trying to build it on Azure DevOps, specifically in creating aliases. azure ...