How to download a local directory with Angular

Is there a way to download HTML files into a local folder using Angular?

I attempted the following approach:

   readFile(file: File) {
    var reader = new FileReader();
    reader.onload = () => {
        console.log(reader.result);
    };
    reader.readAsText(file);
}

 download(){
  this.file= "../monFichier/file.html"
  this.zip.file("file.yaml", this.readFile(this.file));

  this.fileUrl = this.zip.generateAsync({type:"blob"}).then(function (blob) { // 1) generate the zip file
    FileSaver.saveAs(blob, "downloadables.zip");                          // 2) trigger the download
    }, function (err) {
        console.log('err: '+ err);
    });
}

The issue arises from the code within this.readFile(file) because the property 'file' is not of type File. How can I access and read the content of this file in order to include it in the zip file?

Answer №1

there are plenty of resources available! Just do a quick search:

AngularJS Upload and Post Multiple Files

Upload multiple files in angular

Upload multiple File Using angularjs with custom data for each one?

Answer №2

Top solution according to the latest Chrome specifications can be found here

async getBrochure(url: string) {
    try {
      const response = await this.httpClient.get(url, { responseType: 'blob' }).toPromise();
      this.downloadFile(response);
    } catch (error) {
      console.log(error.body.message);
    }
  }

  downloadFile(data) {
    const fileUrl = window.URL.createObjectURL(data);
    const link = document.createElement('a');
    link.href = fileUrl;
    link.download = fileUrl.substr(fileUrl.lastIndexOf('/') + 1);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

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

NodeJS allows for seamless uploading of files

I'm encountering difficulties when trying to upload a file using nodeJS and Angular. I've come across some solutions, but they all involve Ajax which is unfamiliar territory for me. Is there a way to achieve this without using Ajax? Whenever I ...

Adjust the value of a variable within a module using Angular JS

Within my module, I have the code below: var mod; mod = angular.module('ajax-interceptor', []); mod.config(function($httpProvider) { $httpProvider.interceptors.push(["$q", function($q, dependency1, dependency2) { return { ...

Guide on linking an object retrieved from an API to an input text field in Angular

I have been working on reading API responses in Angular and displaying them in input text fields. While I am able to successfully call the API and view the response in the console, I am facing challenges when it comes to capturing the response in an object ...

Discover the best method for retrieving or accessing data from an array using Angular

In my data processing task, I have two sets of information. The first set serves as the header data, providing the names of the columns to be displayed. The second set is the actual data source itself. My challenge lies in selecting only the data from th ...

How to dynamically update ng-repeat values using AngularJS and PHP

I'm facing an issue in my code where I am using ng-repeat, but only the last value gets updated when I try to update "frais" of all values displayed by ng-repeat. Can someone please help me figure out how to update all values? file.html <ion-cont ...

Vue 3 components array typified with Typescript

I'm attempting to establish an array of components representing various steps. Initially, I attempted to assign the type to these steps: const steps = ref<Component[]>([ Component1, Component2, Component3, ]); However, this approach is n ...

The functionality of the TURF booleanwithin feature is malfunctioning and not producing the

Currently, I am working on validating whether a polygon is completely within another polygon. However, there are cases where more complex polygons should return false, but turf interprets them as valid. If you'd like to see the sandbox, click here: ...

ngTagsInput - Enable the onTagAdding feature

I've been attempting to establish a default function for the onTagAdding callback using the tagsInputConfig provider, but without any success. tagsInputConfig.setDefaults('tagsInput', { placeholder: 'Search', maxTags: 10, ...

Utilizing various directives with distinct scopes for a single element

Is it possible for an element to have multiple directives with their own unique scopes? For example, let's consider a custom directive's child element with the controller's scope along with another directive (such as "ng-class"): <custo ...

What is the connection between tsconfig.json and typings.json files?

I recently acquired a .NET MVC sample application that came with Angular2-final. Within the project, I noticed a typings.json file at the root and a tsconfig.json file in the ng2 app directory. What is the connection between these two files? Is this the mo ...

Could someone show me how to modify the color of Material UI Label text in Angular?

Currently, I am developing my Angular university Project using the Mui library. In my logIn form, I have a Dark background and I would like to change the color of my Label Textfield to something different. Can anyone provide assistance? ...

Is there a specific event or callback in MSAL-Angular that can be triggered upon completion of the signup process

Incorporating MSAL-Angular into our application, we are curious if there is an event or callback that triggers once a user successfully signs up, similar to the "msal:loginSuccess" event. ...

What is the best way to access a scope variable within a directive in Angular?

I need to access a scope variable within a directive as a JavaScript variable. Here is the code snippet: app.controller("Home", ["$scope", function($scope) { ... $scope.nb_msg = data.length; ... }]); app.directive("myDiv", function() { // ...

Utilizing the power of Angular 15 in conjunction with Bootstrap 5's SCSS

After recently updating to Angular 15 with Bootstrap 5, I noticed that none of my utility classes are working (e.g. mb-3, mt-5, etc.) when including bootstrap in my styles.scss as shown below. @import 'bootstrap/scss/bootstrap.scss'; I understan ...

Steps to retrieve the search box input value and submit it in an AngularJs component using the Enter key

I'm facing an issue where I am trying to fetch the search list using speciesName from a table. However, when I attempt to retrieve the data by pressing the enter key, it is returning an error stating that the input data is undefined. Is there a way ...

Using Rxjs interval operator for Angular 2 HTTP calls at regular intervals

While attempting to make an http call like this: return this.http.get(this.url).map(res => res.json()); everything works as expected, with the correct response and no errors. However, when I try to make an http call using an interval (using the RxJS o ...

Navigating with AngularJS 1.6: Routing and More

As I set up the routing for my AngularJS v1.6 app, I encountered a small issue. An error message popped up and I can't seem to pinpoint the root cause. Can anyone provide insights on what might be causing this error? Uncaught Error: [$injector:modul ...

Utilizing SCSS variables

Currently, I am in the process of developing an Angular 4 application using angular-cli and have encountered a minor issue. I am attempting to create a component that has the ability to dynamically load styling. The ComponentX component needs to utilize a ...

Clickable elements are not functioning on dynamically generated divs

In the process of developing an application using Angular, I encountered a scenario where I needed to fetch and display data from a web service. The challenge was in dynamically creating div elements with the retrieved data: for(var i = 0 ; i < data.Ou ...

Managing sessions between Node.js and Angular with JSON Web Tokens

I am currently developing an application where NodeJS serves as the backend, handling all business logic and exposing JSON REST services for consumption by the Angular 4 app which acts as a simple client. While this setup seems to be working well, I am fac ...