Downloading a local folder using Angular

Question

How can I download w local folder containing HTML files using Angular?

I tried this:

   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 code this.readFile(file) brings an error because the property file is not of type File.How can i read the content of this file so that it can be added to the zip file?

you send a fileUrl .. what you expect ?? If you set a folder, iterate through all files from it. — CristiC777, Jun 20 '20 at 08:47
I know sir thank you for your answer ,the problem is that i don't know how to do that. should i do like this:( const data = '../monFichier.zip';) and then how can i call the files into that folder? — maria, Jun 20 '20 at 09:04
https://medium.com/@tarekabdelkhalek/how-to-create-a-drag-and-drop-file-uploading-in-angular-78d9eba0b854 — CristiC777, Jun 20 '20 at 09:25

score 0 · Answer 1 · answered Jun 20 '20 at 09:07

0

there are a lot o resources ! just search :

AngularJS Upload and Post Multiple Files

Upload multiple files in angular

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

https://stackoverflow.com/a/44385918

answered Jun 20 '20 at 09:07

CristiC777

481
11
20

I am not trying to upload files infact i want to generate a file from the HTML of a component. – maria Jun 21 '20 at 16:24

score 0 · Answer 2 · answered May 09 '21 at 10:17

Best solution as per new chrome specification https://developers.google.com/web/updates/2018/02/chrome-65-deprecations

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

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

Downloading a local folder using Angular

2 Answers2