Hello there! I'm currently working on a single page application utilizing Angular TypeScript and WebAPI. My goal is to enable users to download .exe files from my website with ease. I have implemented a download button on the page, so when a user clicks on it, a browsing prompt should appear allowing them to choose a location for saving the .exe files onto their local machine.
I would love to hear your thoughts and suggestions on this implementation.
Thank you in advance!
Best regards, Harik
To easily download the file, you can simply add this link:
<a href="path_to_exe_file">Click Here to Download</a>It may be 3 years late, but I wanted to share the solution here for future reference.
Firstly, in your ASP.NET web API controller:-
[Route("downloadFile")]
[HttpGet]
public HttpResponseMessage DownloadFile()
{
HttpResponseMessage response = null;
try
{
response = new HttpResponseMessage(HttpStatusCode.OK);
// Specify the file path - if serving from App_Data folder, adjust as needed
string filePath = HttpContext.Current.Server.MapPath("~/App_Data");
response.Content = new StreamContent(new FileStream($"{filePath}\\app.exe", FileMode.Open, FileAccess.Read));
response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentDisposition.FileName = "app.exe";
response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/exe");
return response;
}
catch(Exception ex)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
}
}
As shown, the process of sending a .exe file is similar to sending other file types like .txt/.pdf. Just make sure to set the correct ContentTypevalue: application/XXX.
You can access this API endpoint from your Angular SPA by using HttpClient or include the API URL in the href attribute of an a tag:
<a href="http://localhost:XXXXX/url/to/downloadFile">Download</a>Clicking on this link will trigger a GET request to the specified URL, resulting in the file download.
Whenever I need to use typed packages in my Node.js projects, there are two steps I have to take: Firstly, install the original package. For example: npm install express -S Secondly, install its type definition package. npm install @types/express -D I f ...
Currently, I'm in the process of implementing logic to efficiently reuse redis connections with bullMQ by referring to this specific section in the bullMQ documentation. My setup involves utilizing the latest BullMQ npm version (1.80.6). As per the ...
The code provided below was utilized in order to generate an array consisting of object groups grouped by date. While I grasped the overall purpose of the code, I struggled with understanding its functionality. This particular code snippet is sourced from ...
I have a URL structured like this: <a id="preview" ng-href="/preview/{{accountId}}/app/{{app.id}}" target="preview" class="btn btn-default" style="margin-left: 20px;" ng-hide="isJobMode">Preview</a> This is part of an Angular app, and I am tr ...
Imagine I have a customized MyArray<T> class that extends the built-in Array<T> class. How can I type it so that when using myMap<T>(myArr: MyArray<T>, <Function>), the return type is correctly inferred as MyArray<T> rat ...
I'm struggling with a particular issue in my code. <select ng-model="selected_student" class="form-control"> <option ng-repeat="obj in students" value="{{obj.id}}">{{obj.name}}</option> </select> When I try to set the sel ...
As a backend API developer diving into AngularJS (version 1) for the first time with my current project, I have encountered a scenario that requires me to fetch server-side content dynamically post-render. The page is set up with ng-app="app" in the <ht ...
Recently, I decided to delve into learning TypeScript by building a simple shopping cart application. If you want to check out the code, feel free to visit my GitHub repository: https://github.com/CsarGomez/shopping-cart-reducers-tx I've encountered ...
Is something wrong with my code if I can only see the footer, header, and side-nav components on localhost? How can I fix this? app.component.html <div class="container-fluid"> <div class="row"> <div class=&q ...
Utilizing _lodash.debounce() has been a bit of a challenge for me. While I have managed to get it working, I can't help but feel that there might be a better way to implement it. The examples provided on the lodash website are quite basic and don&apos ...
Is there a way to use the fetch method with a relative path like this: export async function getServerSideProps() { // Fetch data from local API const res = await fetch(`/api/get_all_prices`) const data = await res.json() // Pass data to th ...
I'm just starting to learn Angular and TypeScript. My goal is to redirect multiple hostnames to a single Angular 6 project because most aspects are the same, with only language and URLs varying. For example, here's what I have implemented in ap ...
I have a small widget with a popover that works fine when placed inside a div, but gets clipped when inserted into a carousel. Here's an example to illustrate what I mean: (The top image shows the widget in a div without clipping) https://i.sstatic. ...
Imagine I have an array like this: $scope.array = ["ABC", "ABCDEF", "ABCDEFGHI", "ABCAFGKJA"]; Is there a way to transform it into the following format? $scope.array = ["ABC", "DEF", "GHI", "KJ"]; Apologies if my question is unclear, I'm still get ...
I am currently working on creating a negative test scenario for my AuthService. The specific test case involves verifying that a property in the constructor is set to null if the angularFireAuth does not return any data. While the positive test case is fun ...
I've been attempting to utilize Clarifai's color API to extract the different colors present in an image. Unfortunately, I am encountering challenges when trying to call the API, as it consistently returns empty objects. Below is the snippet of ...
I have developed the following component: import { FC } from "react"; export interface Option<T> { value: T; label: string; } interface TestComponentProps { name: string; options: Option<string>[]; value: string; onChang ...
My goal is to create a function with an unlimited number of parameters, where the type of each parameter is determined by whether its index is odd or even. For example: flow(isMachineReady(), 'and', isWaterHot(), 'or', isMilkHot(), &ap ...
I've been working on this challenge for the past week, and I would appreciate any help or insights from those who may have experience in this area. Currently, I am in the process of converting vue2-based code to vue3 for a new project. Instead of usi ...
I am attempting to save an item in an object using the object key as the discriminator for the type. Refer to the edit below. Below is a simple example: type Foo = { id: 'foo' } type Bar = { id: 'bar' } type Container = { foo ...