I have a WebApi / MVC app for which I am developing an angular2 client (to replace MVC). I am having some troubles understanding how Angular saves a file.
The request is ok (works fine with MVC, and we can log the data received) but I can't figure out how to save the downloaded data (I am mostly following the same logic as in this post). I am sure it is stupidly simple, but so far I am simply not grasping it.
The code of the component function is below. I've tried different alternatives, the blob way should be the way to go as far as I understood, but there is no function createObjectURL in URL. I can't even find the definition of URL in window, but apparently it exists. If I use the FileSaver.js module I get the same error. So I guess this is something that changed recently or is not yet implemented. How can I trigger the file save in A2?
downloadfile(type: string){
let thefile = {};
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
let url = window.URL.createObjectURL(thefile);
window.open(url);
}
For the sake of completeness, the service that fetches the data is below, but the only thing it does is to issue the request and pass on the data without mapping if it succeeds:
downloadfile(runname: string, type: string){
return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
.catch(this.logAndPassOn);
}
The problem is that the observable runs in another context, so when you try to create the URL var, you have an empty object and not the blob you want.
One of the many ways that exist to solve this is as follows:
this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
error => console.log('Error downloading the file.'),
() => console.info('OK');
When the request is ready it will call the function "downloadFile" that is defined as follows:
downloadFile(data: Response) {
const blob = new Blob([data], { type: 'text/csv' });
const url= window.URL.createObjectURL(blob);
window.open(url);
}
the blob has been created perfectly and so the URL var, if doesn't open the new window please check that you have already imported 'rxjs/Rx' ;
import 'rxjs/Rx' ;
I hope this can help you.
Try this!
1 - Install dependencies for show save/open file pop-up
npm install file-saver --save
npm install -D #types/file-saver
2- Create a service with this function to recive the data
downloadFile(id): Observable<Blob> {
let options = new RequestOptions({responseType: ResponseContentType.Blob });
return this.http.get(this._baseUrl + '/' + id, options)
.map(res => res.blob())
.catch(this.handleError)
}
3- In the component parse the blob with 'file-saver'
import {saveAs as importedSaveAs} from "file-saver";
this.myService.downloadFile(this.id).subscribe(blob => {
importedSaveAs(blob, this.fileName);
}
)
This works for me!
If you don't need to add headers in the request, to download a file in Angular2 you can do a simple (KISS PRINCIPLE):
window.location.href='http://example.com/myuri/report?param=x';
in your component.
This is for folks looking how to do it using HttpClient and file-saver:
Install file-saver
npm install file-saver --save
npm install #types/file-saver --save
API Service class:
export() {
return this.http.get(this.download_endpoint,
{responseType: 'blob'});
}
Component:
import { saveAs } from 'file-saver';
exportPdf() {
this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}
How about this?
this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
.catch((err)=>{return [do yourself]})
.subscribe((res:Response)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(res.blob());
a.download = fileName;
// start download
a.click();
})
I could do with it.
no need additional package.
For newer angular versions:
npm install file-saver --save
npm install #types/file-saver --save
import {saveAs} from 'file-saver';
this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
.subscribe(blob => {
saveAs(blob, 'download.pdf');
});
As mentioned by Alejandro Corredor it is a simple scope error. The subscribe is run asynchronously and the open must be placed in that context, so that the data finished loading when we trigger the download.
That said, there are two ways of doing it. As the docs recommend the service takes care of getting and mapping the data:
//On the service:
downloadfile(runname: string, type: string){
var headers = new Headers();
headers.append('responseType', 'arraybuffer');
return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
.map(res => new Blob([res],{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
.catch(this.logAndPassOn);
}
Then, on the component we just subscribe and deal with the mapped data. There are two possibilities. The first, as suggested in the original post, but needs a small correction as noted by Alejandro:
//On the component
downloadfile(type: string){
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(data => window.open(window.URL.createObjectURL(data)),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
}
The second way would be to use FileReader. The logic is the same but we can explicitly wait for FileReader to load the data, avoiding the nesting, and solving the async problem.
//On the component using FileReader
downloadfile(type: string){
var reader = new FileReader();
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(res => reader.readAsDataURL(res),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
reader.onloadend = function (e) {
window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no');
}
}
Note: I am trying to download an Excel file, and even though the download is triggered (so this answers the question), the file is corrupt. See the answer to this post for avoiding the corrupt file.
Download *.zip solution for angular 2.4.x: you must import ResponseContentType from '#angular/http' and change responseType to ResponseContentType.ArrayBuffer (by default it ResponseContentType.Json)
getZip(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
let headers = this.setHeaders({
'Content-Type': 'application/zip',
'Accept': 'application/zip'
});
return this.http.get(`${environment.apiUrl}${path}`, {
headers: headers,
search: params,
responseType: ResponseContentType.ArrayBuffer //magic
})
.catch(this.formatErrors)
.map((res:Response) => res['_body']);
}
I am using Angular 4 with the 4.3 httpClient object. I modified an answer I found in Js' Technical Blog which creates a link object, uses it to do the download, then destroys it.
Client:
doDownload(id: number, contentType: string) {
return this.http
.get(this.downloadUrl + id.toString(), { headers: new HttpHeaders().append('Content-Type', contentType), responseType: 'blob', observe: 'body' })
}
downloadFile(id: number, contentType: string, filename:string) {
return this.doDownload(id, contentType).subscribe(
res => {
var url = window.URL.createObjectURL(res);
var a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = 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.')
});
}
The value of this.downloadUrl has been set previously to point to the api. I am using this to download attachments, so I know the id, contentType and filename:
I am using an MVC api to return the file:
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public FileContentResult GetAttachment(Int32 attachmentID)
{
Attachment AT = filerep.GetAttachment(attachmentID);
if (AT != null)
{
return new FileContentResult(AT.FileBytes, AT.ContentType);
}
else
{
return null;
}
}
The attachment class looks like this:
public class Attachment
{
public Int32 AttachmentID { get; set; }
public string FileName { get; set; }
public byte[] FileBytes { get; set; }
public string ContentType { get; set; }
}
The filerep repository returns the file from the database.
Hope this helps someone :)
Downloading file through ajax is always a painful process and In my view it is best to let server and browser do this work of content type negotiation.
I think its best to have
to do it. This doesn't even require any new windows opening and stuff like that.
The MVC controller as in your sample can be like the one below:
[HttpGet("[action]")]
public async Task<FileContentResult> DownloadFile()
{
// ...
return File(dataStream.ToArray(), "text/plain", "myblob.txt");
}
It will be better if you try to call the new method inside you subscribe
this._reportService.getReport()
.subscribe((data: any) => {
this.downloadFile(data);
},
(error: any) => сonsole.log(error),
() => console.log('Complete')
);
Inside downloadFile(data) function we need to make block, link, href and file name
downloadFile(data: any, type: number, name: string) {
const blob = new Blob([data], {type: 'text/csv'});
const dataURL = window.URL.createObjectURL(blob);
// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob);
return;
}
const link = document.createElement('a');
link.href = dataURL;
link.download = 'export file.csv';
link.click();
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(dataURL);
}, 100);
}
}
Well, I wrote a piece of code inspired by many of the above answers that should easily work in most scenarios where the server sends a file with a content disposition header, without any third-party installations, except rxjs and angular.
First, how to call the code from your component file
this.httpclient.get(
`${myBackend}`,
{
observe: 'response',
responseType: 'blob'
}
).pipe(first())
.subscribe(response => SaveFileResponse(response, 'Custom File Name.extension'));
As you can see, it's basically pretty much the average backend call from angular, with two changes
I am observing the response instead of the body
I am being explicit about the response being a blob
Once the file is fetched from the server, I am in principle, delegating the entire task of saving the file to the helper function, which I keep in a separate file, and import into whichever component I need to
export const SaveFileResponse =
(response: HttpResponse<Blob>,
filename: string = null) =>
{
//null-checks, just because :P
if (response == null || response.body == null)
return;
let serverProvidesName: boolean = true;
if (filename != null)
serverProvidesName = false;
//assuming the header is something like
//content-disposition: attachment; filename=TestDownload.xlsx; filename*=UTF-8''TestDownload.xlsx
if (serverProvidesName)
try {
let f: string = response.headers.get('content-disposition').split(';')[1];
if (f.includes('filename='))
filename = f.substring(10);
}
catch { }
SaveFile(response.body, filename);
}
//Create an anchor element, attach file to it, and
//programmatically click it.
export const SaveFile = (blobfile: Blob, filename: string = null) => {
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blobfile);
a.download = filename;
a.click();
}
There, no more cryptic GUID filenames! We can use whatever name the server provides, without having to specify it explicitly in the client, or, overwrite the filename provided by the server (as in this example).
Also, one can easily, if need be, change the algorithm of extracting the filename from the content-disposition to suit their needs, and everything else will stay unaffected - in case of an error during such extraction, it will just pass 'null' as the filename.
As another answer already pointed out, IE needs some special treatment, as always. But with chromium edge coming in a few months, I wouldn't worry about that while building new apps (hopefully).
There is also the matter of revoking the URL, but I'm kinda not-so-sure about that, so if someone could help out with that in the comments, that would be awesome.
For those using Redux Pattern
I added in the file-saver as #Hector Cuevas named in his answer. Using Angular2 v. 2.3.1, I didn't need to add in the #types/file-saver.
The following example is to download a journal as PDF.
The journal actions
public static DOWNLOAD_JOURNALS = '[Journals] Download as PDF';
public downloadJournals(referenceId: string): Action {
return {
type: JournalActions.DOWNLOAD_JOURNALS,
payload: { referenceId: referenceId }
};
}
public static DOWNLOAD_JOURNALS_SUCCESS = '[Journals] Download as PDF Success';
public downloadJournalsSuccess(blob: Blob): Action {
return {
type: JournalActions.DOWNLOAD_JOURNALS_SUCCESS,
payload: { blob: blob }
};
}
The journal effects
#Effect() download$ = this.actions$
.ofType(JournalActions.DOWNLOAD_JOURNALS)
.switchMap(({payload}) =>
this._journalApiService.downloadJournal(payload.referenceId)
.map((blob) => this._actions.downloadJournalsSuccess(blob))
.catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))
);
#Effect() downloadJournalSuccess$ = this.actions$
.ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)
.map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))
The journal service
public downloadJournal(referenceId: string): Observable<any> {
const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;
return this._http.getBlob(url);
}
The HTTP service
public getBlob = (url: string): Observable<any> => {
return this.request({
method: RequestMethod.Get,
url: url,
responseType: ResponseContentType.Blob
});
};
The journal reducer
Though this only sets the correct states used in our application I still wanted to add it in to show the complete pattern.
case JournalActions.DOWNLOAD_JOURNALS: {
return Object.assign({}, state, <IJournalState>{ downloading: true, hasValidationErrors: false, errors: [] });
}
case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {
return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors: [] });
}
I hope this is helpful.
I share the solution that helped me (any improvement is greatly appreciated)
On your service 'pservice' :
getMyFileFromBackend(typeName: string): Observable<any>{
let param = new URLSearchParams();
param.set('type', typeName);
// setting 'responseType: 2' tells angular that you are loading an arraybuffer
return this.http.get(http://MYSITE/API/FILEIMPORT, {search: params, responseType: 2})
.map(res => res.text())
.catch((error:any) => Observable.throw(error || 'Server error'));
}
Component Part :
downloadfile(type: string){
this.pservice.getMyFileFromBackend(typename).subscribe(
res => this.extractData(res),
(error:any) => Observable.throw(error || 'Server error')
);
}
extractData(res: string){
// transforme response to blob
let myBlob: Blob = new Blob([res], {type: 'application/vnd.oasis.opendocument.spreadsheet'}); // replace the type by whatever type is your response
var fileURL = URL.createObjectURL(myBlob);
// Cross your fingers at this point and pray whatever you're used to pray
window.open(fileURL);
}
On the component part, you call the service without subscribing to a response. The subscribe
for a complete list of openOffice mime types see : http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html
To download and show PDF files, a very similar code snipped is like below:
private downloadFile(data: Response): void {
let blob = new Blob([data.blob()], { type: "application/pdf" });
let url = window.URL.createObjectURL(blob);
window.open(url);
}
public showFile(fileEndpointPath: string): void {
let reqOpt: RequestOptions = this.getAcmOptions(); // getAcmOptions is our helper method. Change this line according to request headers you need.
reqOpt.responseType = ResponseContentType.Blob;
this.http
.get(fileEndpointPath, reqOpt)
.subscribe(
data => this.downloadFile(data),
error => alert("Error downloading file!"),
() => console.log("OK!")
);
}
Here's something I did in my case -
// service method
downloadFiles(vendorName, fileName) {
return this.http.get(this.appconstants.filesDownloadUrl, { params: { vendorName: vendorName, fileName: fileName }, responseType: 'arraybuffer' }).map((res: ArrayBuffer) => { return res; })
.catch((error: any) => _throw('Server error: ' + error));
}
// a controller function which actually downloads the file
saveData(data, fileName) {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
let blob = new Blob([data], { type: "octet/stream" }),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
// a controller function to be called on requesting a download
downloadFiles() {
this.service.downloadFiles(this.vendorName, this.fileName).subscribe(data => this.saveData(data, this.fileName), error => console.log("Error downloading the file."),
() => console.info("OK"));
}
The solution is referenced from - here
I found the answers so far lacking insight as well as warnings. You could and should watch for incompatibilities with IE10+ (if you care).
This is the complete example with the application part and service part after. Note that we set the observe: "response" to catch the header for the filename. Also note that the Content-Disposition header has to be set and exposed by the server, otherwise the current Angular HttpClient will not pass it on. I added a dotnet core piece of code for that below.
public exportAsExcelFile(dataId: InputData) {
return this.http.get(this.apiUrl + `event/export/${event.id}`, {
responseType: "blob",
observe: "response"
}).pipe(
tap(response => {
this.downloadFile(response.body, this.parseFilename(response.headers.get('Content-Disposition')));
})
);
}
private downloadFile(data: Blob, filename: string) {
const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8;'});
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
private parseFilename(contentDisposition): string {
if (!contentDisposition) return null;
let matches = /filename="(.*?)"/g.exec(contentDisposition);
return matches && matches.length > 1 ? matches[1] : null;
}
Dotnet core, with Content-Disposition & MediaType
private object ConvertFileResponse(ExcelOutputDto excelOutput)
{
if (excelOutput != null)
{
ContentDisposition contentDisposition = new ContentDisposition
{
FileName = excelOutput.FileName.Contains(_excelExportService.XlsxExtension) ? excelOutput.FileName : "TeamsiteExport.xlsx",
Inline = false
};
Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
Response.Headers.Add("Content-Disposition", contentDisposition.ToString());
return File(excelOutput.ExcelSheet, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
}
else
{
throw new UserFriendlyException("The excel output was empty due to no events.");
}
}
Update to Hector's answer using file-saver and HttpClient for step 2:
public downloadFile(file: File): Observable<Blob> {
return this.http.get(file.fullPath, {responseType: 'blob'})
}
The following code worked for me
Made the HTML like this:
<button type="button" onclick="startDownload(someData)">Click to download!</button>
JS is as follows:
let someData = {};
someData.name = 'someName';
someData.fileurl= 'someUrl';
function startDownload(someData){
let link = document.createElement('a');
link.href = someData.fileurl; //data is object received as response
link.download = someData.fileurl.substr(someData.fileurl.lastIndexOf('/') + 1);
link.click();
}
I got a solution for downloading from angular 2 without getting corrupt,
using spring mvc and angular 2
1st- my return type is :-ResponseEntity from java end. Here I am sending byte[] array has return type from the controller.
2nd- to include the filesaver in your workspace-in the index page as:
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
3rd- at component ts write this code:
import {ResponseContentType} from '#angular.core';
let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
this.http
.post('/project/test/export',
somevalue,options)
.subscribe(data => {
var mediaType = 'application/vnd.ms-excel';
let blob: Blob = data.blob();
window['saveAs'](blob, 'sample.xls');
});
This will give you xls file format. If you want other formats change the mediatype and file name with right extension.
Download file
my_url should have the same origin, otherwise it will redirect to that location
I was facing this same case today, I had to download a pdf file as an attachment (the file shouldn't be rendered in the browser, but downloaded instead). To achieve that I discovered I had to get the file in an Angular Blob, and, at the same time, add a Content-Disposition header in the response.
This was the simplest I could get (Angular 7):
Inside the service:
getFile(id: String): Observable<HttpResponse<Blob>> {
return this.http.get(`./file/${id}`, {responseType: 'blob', observe: 'response'});
}
Then, when I need to download the file in a component, I can simply:
fileService.getFile('123').subscribe((file: HttpResponse<Blob>) => window.location.href = file.url);
UPDATE:
Removed unnecessary header setting from service
Angular 12 + ASP.NET 5 WEB API
You can return a Blob object from the server and create an anchor tag and set the href property to an object URL created from the Blob. Now clicking on the anchor will download the file. You can set the file name as well.
downloadFile(path: string): Observable<any> {
return this._httpClient.post(`${environment.ApiRoot}/accountVerification/downloadFile`, { path: path }, {
observe: 'response',
responseType: 'blob'
});
}
saveFile(path: string, fileName: string): void {
this._accountApprovalsService.downloadFile(path).pipe(
take(1)
).subscribe((resp) => {
let downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(resp.body);
downloadLink.setAttribute('download', fileName);
document.body.appendChild(downloadLink);
downloadLink.click();
downloadLink.remove();
});
}
Backend
[HttpPost]
[Authorize(Roles = "SystemAdmin, SystemUser")]
public async Task<IActionResult> DownloadFile(FilePath model)
{
if (ModelState.IsValid)
{
try
{
var fileName = System.IO.Path.GetFileName(model.Path);
var content = await System.IO.File.ReadAllBytesAsync(model.Path);
new FileExtensionContentTypeProvider()
.TryGetContentType(fileName, out string contentType);
return File(content, contentType, fileName);
}
catch
{
return BadRequest();
}
}
return BadRequest();
}
let headers = new Headers({
'Content-Type': 'application/json',
'MyApp-Application': 'AppName',
'Accept': 'application/vnd.ms-excel'
});
let options = new RequestOptions({
headers: headers,
responseType: ResponseContentType.Blob
});
this.http.post(this.urlName + '/services/exportNewUpc', localStorageValue, options)
.subscribe(data => {
if (navigator.appVersion.toString().indexOf('.NET') > 0)
window.navigator.msSaveBlob(data.blob(), "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+".xlsx");
else {
var a = document.createElement("a");
a.href = URL.createObjectURL(data.blob());
a.download = "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+ ".xlsx";
a.click();
}
this.ui_loader = false;
this.selectedexport = 0;
}, error => {
console.log(error.json());
this.ui_loader = false;
document.getElementById("exceptionerror").click();
});
Simply put the url as href as below .
Download File
You may also download a file directly from your template where you use download attribute and to [attr.href] you can provide a property value from the component.
This simple solution should work on most browsers.
<a download [attr.href]="yourDownloadLink"></a>
Reference: https://www.w3schools.com/tags/att_a_download.asp
Create a temporary anchor tag, then click it programmatically with Javascript
async function downloadFile(fileName) {
const url = document.getElementById("url").value
const link = document.createElement('a');
link.href = await toDataURL(url);
link.setAttribute('download', fileName ? fileName : url.split('/').pop());
link.setAttribute('target', 'blank');
document.body.appendChild(link);
link.click();
}
function toDataURL(url) {
return fetch(url)
.then((response) => {
return response.blob();
})
.then((blob) => {
return URL.createObjectURL(blob);
});
}
<input id="url" value="https://images.pexels.com/photos/1741205/pexels-photo-1741205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"/>
<button onclick="downloadFile('test')">Download</button>
Although the question is old, none of the answers are that viable.
As far as I saw all the files are first loaded in memory and saved after that.
This way we:
Cause a lag, for which a custom loading must be implemented.
Load the file in memory, which means for big files the browser will crash.
Do not use the implemented browser download function.
The front end side is simple enough (Angular 12):
downloadFile(url: string, fileName: string): void {
const downloadLink = document.createElement('a');
downloadLink.download = fileName;
downloadLink.href = url;
downloadLink.click();
}
On the back end (.NET 6) we need to work with streams and write to the response body:
public void Get(string fileId)
{
var fileName = fileService.GetFileName(fileId);
var fileContentType = fileService.GetFileContentType(fileId);
this.Response.Headers.Add(HeaderNames.ContentType, fileContentType);
this.Response.Headers.Add(HeaderNames.ContentDisposition, $"attachment; filename=\"{fileName}\"");
fileService.GetFile(Response.Body, fileId);
}
File content type and name can be retrieved from either the DB (if you save file info in there) or the file system.
Content type is parsed from the extension.
I write to the stream like this:
public void GetFile(Stream writeStream, string fileId)
{
var file = GetFileInfo(fileId);
try
{
var fileStream = File.OpenRead(file.FullName);
byte[] buffer = new byte[32768];
int read;
while ((read = fileStream.Read(buffer, 0, buffer.Length)) > 0)
{
writeStream.Write(buffer, 0, read);
}
writeStream.Flush();
}
catch (Exception e)
{
throw new CustomException($"Error occured while reading the file. Inner Exception Message: ({e.Message}) Stack Trace: ({e.StackTrace})", ErrorCode.FileReadFailure, e);
}
}
Keep in mind I have simplified my implementation for presentation purposes, so it has not been tested.
The answers I found were either not working on Angular 13.1 and/or unnecessary complex (like the accepted example) without explaining why this is necessary.
It would be useful for constantly changing ecosystems like Angular to require the version number to be attached.
The mini snippet provided by user #Aleksandar Angelov bypasses the session system, so an unnecessary authorization is necessary.
Derived by his answer, I came up with the following code:
downloadConfiguration(url: string, filename: string) {
this.http.get(url, {responseType: 'blob'})
.subscribe(data => {
// console.log("data", data);
var url = window.URL.createObjectURL(data);
let downloadLink = document.createElement('a');
downloadLink.href = url
downloadLink.setAttribute('download', filename);
downloadLink.click();
});
}
If you only send the parameters to a URL, you can do it this way:
downloadfile(runname: string, type: string): string {
return window.location.href = `${this.files_api + this.title +"/"+ runname + "/?file="+ type}`;
}
in the service that receives the parameters
Related
I'm having difficulty viewing downloaded png/jpg files, the file downloads properly but cannot be viewed. I think it could be related to the way I'm saving the object in typescript or something to do with content header types?
Backend: .Net Core 6.0 Web API
Frontend: Vue 3
This is the result of trying to open the downloaded image:
Fiddler trace shows the image being sent from the server:
This is how I'm downloading the file in TS:
await someService
.download(item.url, item.name)
.then(async (r: any) => {
const blob = new Blob([r.data]);
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
const disposition = r.request.getResponseHeader("Content-Disposition");
if (disposition && disposition.indexOf("attachment") !== -1) {
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
let matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) {
link.download = matches[1].replace(/['"]/g, "");
}
}
link.click();
URL.revokeObjectURL(link.href);
})
.catch((err: any) => {
showError(err);
});
This is how the server sends its response:
public IActionResult DownloadAttachmentAsync([FromQuery] DownloadAttachmentInputDto model)
{
try
{
FileStream fs = new FileStream(_pathToFile, FileMode.Open);
return File(fs, "image/png", model.FileName);
}
catch (Exception err)
{
_errorHandler.Error(_loggedInUser, err);
return BadRequest(_errorHandler.UserFriendlyErrorMessage(err));
}
}
sample response header (different file):
Not sure where else to look, any help is greatly appreciated!
For anyone who stumbles upon similar type of issue.
Whenever you want to download pdf/image type of documents in frontend its necessary to define responseType:blob for your api call.
I have explained it in detail here
any help to my problem would be really appreciated.
Here is the context:
I am currently sending a zip file from java RestControler:
public ResponseEntity<Resource> download(#RequestBody ProjectDTO projectDTO) {
Project project = ProjectDTO.toProject(projectDTO);
byte[] out = initApplicationService.download(project);
ByteArrayResource resource = new ByteArrayResource(out);
return ResponseEntity
.ok()
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + getZipFilename(project))
.contentType(MediaType.parseMediaType("application/octet-stream"))
.contentLength(out.length)
.header("X-Suggested-Filename", getZipFilename(project))
.body(resource);
}
This works really well because i can dowload it through swagger.
But on plain javascript front, i can't figure out what i am missing :
primary:
const download = async (): Promise<void> => {
if (project.value.folder !== '') {
await projectService
.download(toProject(project.value))
.then(response => {
const url = window.URL.createObjectURL(new Blob([response],{type:'application/octet-stream'}));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', project.value.baseName + '.zip');
document.body.appendChild(link);
link.click();
})
.catch(error => logger.error('Downloading project failed', error));
}
};
calling secondary:
async download(project: Project): Promise<ArrayBuffer> {
const restProject: RestProject = toRestProject(project);
return this.axiosHttp
.post<ArrayBuffer, RestProject>('api/projects/download', restProject)
.then(response => new Uint8Array(response.data));
}
It dowloads well a zip but well opening it i got the following error :
"An error occured during archive loading"
Thanks to any help :)
I added the responseType in post request and i also removed Uint8Array convertion and it worked fine.
return this.axiosHttp
.post<ArrayBuffer,RestProject>('api/projects/download', restProject,{ responseType: 'blob' })
.then(response => response.data);
I guess that when receiving the datas, axios needs to know what is coming to convert correctly it in the proper format. on the fly.
I'm working on a simple project to download videos from the browser using youtube-dl, for study porpuses.
And I was wondering how to download local files (mp4) on the browser using axios. The browser starts the download, but when it finishes, I can't open the mp4 file.
This is my code Go snippet:
func download(w http.ResponseWriter, r *http.Request) {
fileName := "video.mp4"
data, err := ioutil.ReadFile(fileName)
if err != nil {
log.Print(err)
return
}
w.Header().Set("Content-Type", "application/octet-stream")
w.Header().Set("Content-Disposition", "attachment; filename="+fileName)
w.Header().Set("Content-Transfer-Encoding", "binary")
w.Header().Set("Expires", "0")
http.ServeContent(w, r, fileName, time.Now(), bytes.NewReader(data))
}
And this is my JS function, triggered when the user input a text:
<script>
import axios from 'axios';
export default {
name: 'govideo',
data() { return {
url: '',
} },
methods: {
postreq() {
axios.post("http://127.0.0.1:8090/download", {
data: this.url,
responseType: 'blob'
}).then((response) => {
var fileURL = window.URL.createObjectURL(new Blob([response.data]));
var fileLink = document.createElement('a');
fileLink.href = fileURL;
fileLink.setAttribute('download', 'video.mp4');
document.body.appendChild(fileLink);
fileLink.click();
})
}
}
}
</script>
There's no problem with the video file, but when I download it from the browser I can't open it.
I'm trying to download the file from my post request, should I do a separate get request for it?
There's something wrong with my code, or I'm missing something?
The problem is the method of handle the response in axios.I hope the code could help you
validateGrpc() {
axios.post("http://127.0.0.1:8090/download", {
data: this.url,
responseType: 'blob'
})
.then(response => {
var blob = new Blob([response.data]);
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //create the download url
downloadElement.href = href;
downloadElement.download = "test.mp4"; //the name of the downloaded file
document.body.appendChild(downloadElement);
downloadElement.click(); //click to file
document.body.removeChild(downloadElement); //remove the element
window.URL.revokeObjectURL(href); //release the object of the blob
// console.log(response);
})
.catch(response => {
console.log(response);
});
},
If you use my code to download the file ,you will see the file from the browser.
I have see your code on the github.I think you should put the video.mp4 into the directory vue-go-study\backend.Then everything goes well.
Using Node.js, I am trying to get an image from a URL and upload that image to another service without saving image to disk. I have the following code that works when saving the file to disk and using fs to create a readablestream. But as I am doing this as a cron job on a read-only file system (webtask.io) I'd want to achieve the same result without saving the file to disk temporarily. Shouldn't that be possible?
request(image.Url)
.pipe(
fs
.createWriteStream(image.Id)
.on('finish', () => {
client.assets
.upload('image', fs.createReadStream(image.Id))
.then(imageAsset => {
resolve(imageAsset)
})
})
)
Do you have any suggestions of how to achieve this without saving the file to disk? The upload client will take the following
client.asset.upload(type: 'file' | image', body: File | Blob | Buffer | NodeStream, options = {}): Promise<AssetDocument>
Thanks!
How about passing the buffer down to the upload function? Since as per your statement it'll accept a buffer.
As a side note... This will keep it in memory for the duration of the method execution, so if you call this numerous times you might run out of resources.
request.get(url, function (res) {
var data = [];
res.on('data', function(chunk) {
data.push(chunk);
}).on('end', function() {
var buffer = Buffer.concat(data);
// Pass the buffer
client.asset.upload(type: 'buffer', body: buffer);
});
});
I tried some various libraries and it turns out that node-fetch provides a way to return a buffer. So this code works:
fetch(image.Url)
.then(res => res.buffer())
.then(buffer => client.assets
.upload('image', buffer, {filename: image.Id}))
.then(imageAsset => {
resolve(imageAsset)
})
well I know it has been a few years since the question was originally asked, but I have encountered this problem now, and since I didn't find an answer with a comprehensive example I made one myself.
i'm assuming that the file path is a valid URL and that the end of it is the file name, I need to pass an apikey to this API endpoint, and a successful upload sends me back a response with a token.
I'm using node-fetch and form-data as dependencies.
const fetch = require('node-fetch');
const FormData = require('form-data');
const secretKey = 'secretKey';
const downloadAndUploadFile = async (filePath) => {
const fileName = new URL(filePath).pathname.split("/").pop();
const endpoint = `the-upload-endpoint-url`;
const formData = new FormData();
let jsonResponse = null;
try {
const download = await fetch(filePath);
const buffer = await download.buffer();
if (!buffer) {
console.log('file not found', filePath);
return null;
}
formData.append('file', buffer, fileName);
const response = await fetch(endpoint, {
method: 'POST', body: formData, headers: {
...formData.getHeaders(),
"Authorization": `Bearer ${secretKey}`,
},
});
jsonResponse = await response.json();
} catch (error) {
console.log('error on file upload', error);
}
return jsonResponse ? jsonResponse.token : null;
}
I am new to Javascript, I want to download a file that comes from a dynamic url after the result of a promise, it is a generated pdf which I am trying to download with the following call but unable to make it work as download doesn't start.
<button (click)='downloadMyFile()'>Download</button>
downloadMyFile(){
//url
.then((result)=>{
//result is contains a url www.abc.com/file234
window.location.href = result
})
.catch((error)=>{
//myerror
})
}
Here is plunk
You can force download file like this:
const link = document.createElement('a');
link.href = result;
link.download = 'download';
link.target = '_blank';
link.click();
Simply create anchor tag, set its href and download attributes and trigger click event.
Also note that this is not really about URL ending with extension or not - it is more about the headers that you send with the file response (namely Content-Type and Content-Disposition).
<button (click)='downloadMyFile()'>Download</button>
downloadMyFile(){
.then((result)=>{
var a= document.createElement('a');
a.href = result;
a.download = 'download name';
a.click();
}).catch((error)=>{})
}
Use this line of codes:
//redirect current page to success page
window.location="www.example.com/success.html";
window.focus();
OR You can use pdf.js from http://mozilla.github.io/pdf.js/
PDFJS.getDocument({ url: pdf_url }).then(function(pdf_doc) {
__PDF_DOC = pdf_doc;
__TOTAL_PAGES = __PDF_DOC.numPages;
// Hide the pdf loader and show pdf container in HTML
$("#pdf-loader").hide();
$("#pdf-contents").show();
$("#pdf-total-pages").text(__TOTAL_PAGES);
// Show the first page
showPage(1);
}).catch(function(error) {
alert(error.message);
});;
Source and Complete code: http://usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons
instead of making ajax request to download file just do the following.
window.open(url);
(3 different files) in app.module.ts :
import {HttpClientModule} from '#angular/common/http';
...
providers: [
HttpClientModule,
...
in api.service.ts :
import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpResponse} from '#angular/common/http';
...
public getMeMyPDF(): any {
const url = '/my/api/for/pdf';
this.PDF = this.http.get(url, {
observe: 'response',
headers: new HttpHeaders({'Content-Type', 'application/pdf'}),
responseType: 'text' as 'text' // <-- this part is rediculous but necessary
}).catch(this.handleError);
return this.PDF;
}
handleError(error: HttpErrorResponse) {
console.log('an http get error happened.');
console.error(error);
let errorMessage;
if (error.error instanceof Error) {
errorMessage = `An error occurred: ${error.error.message}`;
} else {
errorMessage = `Server returned code: ${error.status}, error message is: ${error.message}`;
}
console.error(errorMessage);
return errorMessage;
}
and in my.component.that.calls.api :
getMeAPDF(){
this.apiService.getMeMyPDF().subscribe(res => {
if(res !== null && res !== undefined){
this.saveToFileSystem(res.body);
}
}, (error) => console.log(error), () => {});
}
private saveToFileSystem(response) {
const blob = new Blob([response], { type: 'text/pdf' });
const d = new Date();
saveAs(blob, 'WOWPDF_' + this._datepipe.transform(d, 'yyyyMMdd_HHmmss') + '.pdf');
}
use saveAs() function with npm install #types/file-saver --save-dev
or in package.json:
"dependencies": {
"file-saver": "^1.3.3"
}
Sample to export CSV file:
HTML:
<button (click)="exportCsv()" id="exportCsv" class="btn btn-primary" type="submit">CSV Export</button>
Component:
import { FooService } from '../services/foo.service';
constructor(private fooService: FooService) { }
async exportCsv() {
this.fooService.exportCsv(this.fooid);
}
Service (fooService):
import { saveAs } from 'file-saver';
import { HttpParams, HttpResponse} from '#angular/common/http';
exportCsv(fooid: string) {
let params: HttpParams = new HttpParams();
params = params.append('fooid', fooid);
this.apiService.getCSVFile('api/foo/export', params).subscribe(response => this.saveToFileSystem(response)
, error => this.errorProcessor(error));
}
private saveToFileSystem(response: HttpResponse<Blob>) {
const contentDispositionHeader = response.headers.get('Content-Disposition');
let filename = 'export.csv';
if (contentDispositionHeader !== null) {
const parts: string[] = contentDispositionHeader.split(';');
filename = parts[1].split('=')[1];
}
const blob = response.body;
if (blob !== null) {
saveAs(blob, filename);
}
}
You can download the response of your promise like mentioned below:
var triggerDownload = function(url, fileName) {
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("download", fileName);
opts.container.append(a);
a.click();
$(a).remove();
};
downloadMyFile() {
promise
.then((result) => {
triggerDownload(result, 'xyz.pdf');
})
.catch((error) => {
//myerror
})
}
Here is the code that works for downloadign the API respone in IE and chrome/safari. Here response variable is API response.
let blob = new Blob([response], {type: 'application/pdf'});
let fileUrl = window.URL.createObjectURL(blob);
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.pdf');
} else {
window.open(fileUrl);
}
you can download any dynamic file by just write a download in the tag where you have fetch the url to the file. try this and let me know if it work for you.
here is the working example:
<a href="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" download>
Javascript is not really required for this, so I will suggest the laziest and easiest possible solution - to simply use a basic html tag instead.
Instead of a button, use an anchor tag with the download keyword:
Download
Very old browsers that does not support HTML5 will fail elegantly - instead of downloading the target, older browsers will simply display the target in the browser. That's very graceful degradation and a fully acceptable fallback.
You can style the anchor to look like whatever you want with css, and is also the most semantically correct tag: anchors are for links (and this is a link) while buttons are for interacting with forms (like submit) or other interactions with the UI. THe end user won't know or care what tag you use anyway.
If the url will be changed, like getting different parameters based on interactions with the UI, you could always use javascript to update the URL on the tag - but that is a different question.
Reference for Anchor tag on MDN