angular - File Name and Extension not respected when sent from .NET Web API to Angular2 App -

the use case: input field receives .rdl file on actions performed. file gets sent .net web api service gets processed , once processing complete, returns processed file user. client implemented using angular2.

view template

<h3 align="center" class="title" onclick="window.location.reload()">    converter utility </h3> <div align="center">    <input type="file" accept=".rdl" (change)="changelistener($event)"/>    <br>    <br>    <input id="replace" name="replace" type="checkbox"> replace file?<br>    <label></label>    <br>    <br>    <input type="button" value="process" (click)="doprocess()" />    <br>    <br> </div> 

component

import { component } '@angular/core'; import { mainservice } './services/main.service';  @component({   selector: 'converter-utility',   templateurl: './app/views/main.component.html',   providers: [mainservice],   styleurls: ['./app/views/css/main.component.css'] })  export class appcomponent {   private workablefile: any;    constructor(     private mainservice: mainservice     ) { }    changelistener($event): void {     this.workablefile = $event.target.files[0];   }    doprocess() {     var myreader: filereader = new filereader();     var serv = this.mainservice;      myreader.readastext(this.workablefile);     myreader.onload = (e) => {       serv.passfileurl(myreader.result)                     .subscribe((data: any) => {                      try                      {                       window.navigator.mssaveoropenblob(data, this.workablefile.name);                     }                      catch (err)                     {                     var url = window.url.createobjecturl(data);                     window.open(url);                     }                   });     }   } } 

service

import { injectable } '@angular/core'; import { http, headers, response,responsecontenttype } '@angular/http'; import { observable } 'rxjs/observable'; import 'rxjs/add/operator/topromise'; import 'rxjs/add/operator/map';  @injectable() export class mainservice {    private projecturl = 'http://localhost:64895/api/process/retrievefile';    private headers = new headers({ 'content-type': 'application/json; charset=utf-8' });     constructor(private http: http) { }     passfileurl(result) {            var json = json.stringify(result);            return this.http.post(this.projecturl, json, {                                                            headers: this.headers,                                                             responsetype: responsecontenttype.blob})                            .map((response) => {                                return new blob([response.blob()], {type:'application/octet-stream'});                            });    } } 

method on webapi spits out fixed file

private httpresponsemessage savefile() {     httpresponsemessage response = new httpresponsemessage(httpstatuscode.ok);     response.content = new stringcontent(_copyfile.getcopiedfile.outerxml);     response.content.headers.contenttype = new mediatypeheadervalue("application/octet-stream");     response.content.headers.contentdisposition = new contentdispositionheadervalue("attachment");     response.content.headers.contentdisposition.filename = "fixeddocument.rdl";     return response; } 

the problem

the returned file has following issues need workaround for:

1. the file has 'file name' guid (testing in chrome). expect file name fixeddocument.rdl not being passed through angular2 controller.
2. the file doesnt contain extension on , therefore browser unsure it. file in xml format.

the content fine, fixes in places expected. so, after discussion team, figured problem might @ angular side blob class , content-disposition.

how can possibly fixed?

we have attempted using content-disposition suggested in many other posts however, not seem respected , guid assigned.