File upload and download in angular 4 typescript

Question

How can I download (the .exe that is in the root path) and download the file from Angular 4 ?.
I am new to Angular4, as well as typing and the .NET Core Web API. I googled about this, but could not find a solution.

Here are some similar questions I found:

• Download a file to the controller using typescript

• Return binary from controller in ASP.NET Web API

Answer 1

I would like to add an update for Angular 4.3 / 5/6/7/8, especially for the simplified HttpClient. The absence of a "Content-Type" is especially important, since Angular automatically creates a Content-Type (there is a tendency to add Content-Type = undefined. Not, as this will create problems in various circumstances and may not be good practice either). Once there is no Content-Type, the browser will automatically add 'multipart / form-data' and related parameters. Please note that Spring Boot is used here, although this should not matter.

Here is some kind of pseudo code - I apologize for the phat fingers. Hope this helps:

MyFileUploadComponent (.html):

 ... <input type="file" (change)=fileEvent($event)...> 

MyFileUploadComponent (.ts) calls MyFileUploadService (.ts) for fileEvent:

 ... public fileEvent($event) { const fileSelected: File = $event.target.files[0]; this.myFileUploadService.uploadFile(fileSelected) .subscribe( (response) => { console.log('set any success actions...'); return response; }, (error) => { console.log('set any error actions...'); }); } 

MyFileUploadService.ts:

 ... public uploadFile(fileToUpload: File) { const _formData = new FormData(); _formData.append('file', fileToUpload, fileToUpload.name); return<any>post(UrlFileUpload, _formData); //note: no HttpHeaders passed as 3d param to POST! //So no Content-Type constructed manually. //Angular 4.x-6.x does it automatically. } 

Answer 2

To upload a file, we can publish the data as multipart / form-data. To do this, we must use the FormData class. Here is an example.

Template:

 <form #yourForm="ngForm" (ngSubmit)="onSubmit()"> <input type="text" [(ngModel)]="Name" name="Name"/> <input type="file" #fileupload [(ngModel)]="myFile" name="myFile" (change)="fileChange(fileupload.files)"/> <button type="submit">Submit</button> </form> 

Component:

 import { Http, Response, Headers, RequestOptions } from '@angular/http'; /* When we select file */ Name:string; myFile:File; /* property of File type */ fileChange(files: any){ console.log(files); this.myFile = files[0].nativeElement; } /* Now send your form using FormData */ onSubmit(): void { let _formData = new FormData(); _formData.append("Name", this.Name); _formData.append("MyFile", this.myFile); let body = this._formData; let headers = new Headers(); let options = new Options({ headers: headers }); this._http.post("http://example/api/YourAction", body, options) .map((response:Response) => <string>response.json()) .subscribe((data) => this.message = data); } 

API to download the file:
https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2

Answer 3

it is very simple component.html will look like

 <div class="form-group col-md-6" style="margin-left:50%;margin-top:-8%" > <input type="file" value="upload" accept=".jpg" (change)=fileUploader($event)> </div> 

while in the ts file it will look like

 public fileUploader(event) { const elem = event.target; if (elem.files.length > 0) { console.log(elem.files[0]); } // ... } 

Answer 4

to download a file with a corner try with this, it works "

 download(row) { return this.Http .get(file_path , { responseType: ResponseContentType.Blob, }) .map(res => { return { filename: row.name, data: res.blob() }; }) .subscribe(res => { let url = window.URL.createObjectURL(res.data); let a = document.createElement('a'); document.body.appendChild(a); a.setAttribute('style', 'display: none'); a.href = url; a.download = res.filename; a.click(); window.URL.revokeObjectURL(url); a.remove(); }); } 

"

Answer 5

 <form [formGroup]="uploadForm" (ngSubmit)="onSubmit()"> Select image to upload: <input type="file" name="avatar" id="fileToUpload" formControlName="file1" (change)="fileEvent($event)"> <input type="submit" value="Upload Image" name="submit"> </form> 

 import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-praveen', templateUrl: './praveen.component.html', styleUrls: ['./praveen.component.css'] }) export class PraveenComponent implements OnInit { constructor(private httpClient:HttpClient) { } uploadForm = new FormGroup ({ file1: new FormControl() }); filedata:any; fileEvent(e){ this.filedata=e.target.files[0]; console.log(e); } onSubmit() { let formdata = new FormData(); console.log(this.uploadForm) formdata.append("avatar",this.filedata); this.httpClient .post<any>("http://localhost:3040/uploading",formdata) .subscribe((res)=>{console.log(res}); } ngOnInit() { } } 

Answer 6

Please use the code below to download the file. HTML code:

 <div class="col-md-6"> <label class="control-heading">Select File</label> <input type="file" [multiple]="multiple" #fileInput (change)="selectFile($event)"> <input type="button" style="margin-top: 15px;" [disabled]="!isUploadEditable" class="data-entry-button btn-pink" (click)="uploadFile()" value="Upload" title="{{globalService.generateTooltip('upload attachment','Click to upload document.')}}" data-html="true" data-toggle="tooltip" data-placement="bottom" /> </div> 

Component Code:

 selectFile(event: any) { this.selectedFiles = event.target.files; } uploadFile() { this.currentFileUpload = this.selectedFiles.item(0); this.globalService.pushFileToStorage(this.currentFileUpload).subscribe(event => { if (event instanceof HttpResponse) { this.loadDocumentInfo(); this.showNotification('Upload Attachment', 'File Uploaded Successfully', 'success'); this.myInputVariable.nativeElement.value = ""; } }); this.selectedFiles = undefined; } 

Global Service Code:

 pushFileToStorage(file: File): Observable<HttpEvent<{}>> { const formdata: FormData = new FormData(); formdata.append('file', file); formdata.append('documentVersionId', this.documentVersionId.toString()); formdata.append('levelId', this.levelId); formdata.append('levelKey', this.levelKey); formdata.append('LoggedInUser', this.loggedInUser); const req = new HttpRequest('POST', this.urlService.CMMService + '/CMMService-service/UploadFileAsAttachment', formdata, { reportProgress: true, responseType: 'text' } ); return this.http.request(req); } 

To upload a file with the name and path to the file:

call the DownloadFile function from html with the file name and path to the file as parameters.

component code:

 DownloadFile(filePath: string, filename: string) { this.globalService.DownloadFile(filePath).subscribe(res => { //console.log('start download:', res); var url = window.URL.createObjectURL(res); var a = document.createElement('a'); document.body.appendChild(a); a.setAttribute('style', 'display: none'); a.href = url; res.filename = filename; a.download = res.filename; a.click(); window.URL.revokeObjectURL(url); a.remove(); // remove the element }, error => { console.log('download error:', JSON.stringify(error)); }, () => { console.log('Completed file download.') }); } 

Global service code for downloading the file:

 public DownloadFile(filePath: string): Observable<any> { return this.http .get(this.urlService.CMMService + '/CMMService-service/DownloadFile?filePath=' + filePath, { responseType: 'blob' }); } 

on the server side, use the following code:

 [HttpGet] [ODataRoute("DownloadFile")] public HttpResponseMessage DownloadFile(string filePath) { var fileData = CommonDomain.DownloadFileFromS3(filePath); var dataStream = new MemoryStream(fileData.ByteArray); HttpResponseMessage httpResponseMessage = Request.CreateResponse(HttpStatusCode.OK); httpResponseMessage.Content = new StreamContent(dataStream); httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); httpResponseMessage.Content.Headers.ContentDisposition.FileName = fileData.FileName; httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); httpResponseMessage.Content.Headers.Add("x-filename", fileData.FileName); return httpResponseMessage; } 

Please let me know if you still encounter any problem.