CODEWITHSUNDEEP
javascriptangular
Dharmesh
Dharmesh

Reputation: 6003

How to download image in angular with node.js?

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

enter image description here

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)
}

Upvotes: 1

Views: 9359

Answers (3)

Sushil
Sushil

Reputation: 1131

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>

Upvotes: 1

Dharmesh
Dharmesh

Reputation: 6003

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);
});

Upvotes: 1

R. Viral
R. Viral

Reputation: 396

You can did with anchor tag check bellow code

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

Upvotes: 0

Related Questions