How to download image in angular with node.js?

Question

Here I have one image and click on that image It opens menu, In menu one download option, click on download button I want to download this image how it is possible ? (imageUrl is in below code console). when i click on download I want to open save as and download image in my PC

HTML

<mat-menu #contextMenu="matMenu">
  <ng-template matMenuContent let-item="item">
    <button mat-menu-item (click)="downloadFile(item)">Download</button>
    <button mat-menu-item>Delete</button>
    <button mat-menu-item>Rename</button>
  </ng-template>
</mat-menu>

TS

folderObj : Folder = new Folder();

downloadFile(item) {
 this.folderObj.folderName = `${this.commonUrlObj.commonUrl}/${item.urloffolder}/${item.imageName}`;
 console.log(this.folderObj.folderName); // http://127.0.0.1:3000/122/122/733/15.jpg (this is imageUrl)
}

@Sushil can you help me easy way and put in answer, after so much searching i got this answer and it works so i put this — Dharmesh, Dec 29 '18 at 05:03
check the answer below. Please leave a comment if it doesn't work. — Sushil, Dec 29 '18 at 05:16

Dharmesh · Accepted Answer · 2018-12-29T05:05:07.600

using file-saver we can do this I hope this code is useful

TS

 folderObj : Folder = new Folder();
 constructor(private userService : UserService){}
 import { saveAs} from 'file-saver';

downloadFile(item){
  let index = this.uploadedImagesObj.findIndex( x => x.imageName ===  item.imageName);
  var filename = this.uploadedImagesObj[index].imageName;
  this.userService.downloadFile({'filename': filename,'urloffolder' : item.urloffolder}).subscribe(
    (data) => {
      if(data && data != undefined && data != null){
        saveAs(data,filename);
      }
    }
  )
}

Service

import { HttpClient, HttpHeaders } from '@angular/common/http';

downloadFile(file){
  return this.httpClient.post('http://127.0.0.1/downloadFile',file,{
    responseType : 'blob',
    headers : new HttpHeaders().append('content-type','application/json')
  });
}

app.js (node.js code)

app.post('/downloadFile',function(req,res,next){
  filepath = path.join(__dirname,'./public/'+req.body.urloffolder+'/'+req.body.filename);
  res.sendFile(filepath);
});

score 1 · Answer 2 · answered Dec 29 '18 at 05:14

Add img path to a href and img src and add download attribute as in <a href="imagepath" download="downloaded filename">

Leave a comment if it doesn't work.

<div class="img-wrap">
    <img  src="imagepath"/>
    <i class="fa fa-download" aria-hidden="true">
        <a href="imagepath" download="downloaded filename"></a>
    </i>
</div>

score 0 · Answer 3 · answered Dec 12 '18 at 08:19

0

You can did with anchor tag check bellow code

<a download href="{{commonUrlObj.commonUrl}}/{{item.urloffolder}}/{{item.imageName}}">Download</a>

answered Dec 12 '18 at 08:19

R. Viral

386
1
6

1

it is open image on same tab not download but i want to open save as and download image in my PC – Dharmesh Dec 12 '18 at 08:24
i think i am not sure we can do with programmatic or not you can check this https://stackoverflow.com/questions/38981701/how-to-prompt-save-as-option-for-user-to-download-file-using-chrome this will help – R. Viral Dec 12 '18 at 08:28

How to download image in angular with node.js?

3 Answers3