How to download .exe files from SPA using angularjs webapi - angularjs

I'm developing a single page application using angular typescript and webapi. I'm trying to download some .exe files from my website.
I have a download button on page, when user clicks on it the browse should prompt for the saved location and the .exe files should get downloaded to his local machine.
Please share your thoughts.
Thank you.
Harik.

Just create link Download

Well, 3 years late, but posting the answer here for future reference.
First, in your ASP.NET web api controller:-
[Route("downloadFile")]
[HttpGet]
public HttpResponseMessage DownloadFile()
{
HttpResponseMessage res = null;
try
{
res = new HttpResponseMessage(HttpStatusCode.OK);
// if you are serving file from App_Data folder, otherwise set your path
string path = HttpContext.Current.Server.MapPath("~/App_Data");
res.Content = new StreamContent(new FileStream($"{path}\\app.exe", FileMode.Open, FileAccess.Read));
res.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
res.Content.Headers.ContentDisposition.FileName = "app.exe";
res.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/exe");
return res;
}
catch(Exception ex)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
}
}
As you can see, the method to sending a .exe file to the client is exactly the same as sending .txt/.pdf file. You only need to change the ContentTypeto the proper type: applicaion/XXX.
You can then call the above api from your angular SPA using HttpClient or just put the url of your api inside of the href attribute of a tag:
Download
Clicking on this a element will send a GET request to the above url and the file will be downloaded.

Related

File upload in angularjs and laravel

I am using ngf-file-upload module to upload file through angularjs and laravel.
This is my html initiatior :
<div class="button" ngf-select="profile.uploadFiles($file, $invalidFiles)">Upload on file select</div>
This is my controller in angular
vm.uploadFiles = function(file) {
if (file) {
file.upload = Upload.upload({
url: 'http://localhost/api/uploadImg',
data: {file: file}
});
}
}
This is my upload API code in Laravel.
public function uploadImg()
{
$data = Input::file('file');
return $data;
}
My angular app is running on 9000 port and laravel in default port.
The request from angular is hitting the api built in laravel but the thing is that it's missing the file. Although my request header looks suspicious in Browser's Network. Like content-type is not multipart/form-data
This is the link of danial farid js fiddle
I am using the same code, with alterations to sync with my api, that is mentioned in the fiddle.
The strange is thing that when i am giving my local API path to this fiddle then it is working fine. But it's not working on my project locally. I think there is something that i am missing on my angular side.
This is the image of param that is send when i am trying to upload file from local project
This is the image of param that is send when i am trying to upload file from fiddle to my api
My Conclusion
There is no problem in the code because I am able to upload the file from a html file( not in my angular project) that is specifically i have created to test file uploading and it's running.
BUT
It's failing when i am trying to upload through my project.
I have attached the images of my console one case is working one(uploading image through random file) and other is not working case (where i am uploading file through my project).
I don't what to do next. I think there is something in my angular project that is creating a obstacle in my uploading process.
Interceptors
Yes, they were creating problem in file upload because we have set headers in interceptors
and the default headers we have set in interceptors
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
For every request that has been made from our angular app is going through the interceptor and the interceptor was modifying every request with these headers. So i Have to remove this header from the interceptor.
Note
Don't forget to add the removed header in every other request

upload pdf file from local system to aws-s3

In my serverless app, I need to generate pdf dynamically and then upload that generated pdf into aws-s3 bucket. But in serverless, we can only sent json request, so I sent my html string to serverless, it generate pdf and then save that generated pdf into local machine. I think, that part I can do, But my problem is, I need to upload that newly generated pdf into aws-s3. My code is given below:
Angular Code:
$scope.generate_pdf = function() {
var html = angular.element('html').html();
var service = API.getService(); // sent html string as json for generating pdf
service.downloadPdf({}, { html : html },
function(res) {
console.log("res : ", res); // res.url: /tmp/dynamica-generate.pdf
// pdf is saved into '/tmp' folder
// now I want to upload pdf from '/tmp' folder to aws-s3
}, function(err) {
console.log("err : ", err);
});
};
How can I solve this problem, Thanks in Advance.
If you want to upload file from your local machine to S3 bucket. Install AWS Cli on your local machine. after that is done add a cron job for this command
aws s3 sync /tmp/* s3://mybucket
You should be able to use the aws Javascript S3 sdk to integrate JS code into your angularJS code.
You can follow from this blog post and github code
Its also mentioning about setting up the credentials using a public IAM account. Depending how you serve the files to your clients, you might check also using Pre-Signed URL’s.

how can I enable the user download the whole application from the client side?

So, I have a web app hosted in heroku which is automatically updated when I update my github repository. I want to enable the user to download the all the app files with their folders, images etc as a zip from the client side so he can run it offline locally. I also want to add a file with user's comments to that zip before I force it to be downloaded on his browser.
I found a way to do it by redirecting him to github (but this will actually not redirect him there, it will just force a zip from github to be downloaded) :
window.location.replace("https://github.com/foo/FOO/archive/master.zip");
But this solution doesn't work for me because I want to add to that zip an other file which will be created at the moment of the user download request.
Does anyone have a solution to this?
Is there a way to do that by making requests to herokku to receive the files and using the jszip to pack them?
I found the solution using github's service, JSZipUtils and jszip. Here's the code for whom it might of help :
var content = null;
JSZipUtils.getBinaryContent("https://github.com/foo/FOO/archive/master.zip", function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
// to remove a not needed file
zip.remove("CWAPP-master/abc.js");
// to add a custom file
zip.file('CWAPP-master/myClientSideFile.js',file);
content = zip.generate({type:"blob"});
saveAs(content, 'myZip'); // force download
});

How to implement a file download in MeanJS application

Im a mobile app developer and new to web apps. Im trying to implement upload and download a file in the web app using MeanJS stack. I have used multer plugin to upload file to server. After a lot of googling I have successfully used Multer which uploads and saves the files to uploads directory.
Now Im trying to implement download the same, and I don't have an idea to do this. I have followed two methods:
<a target="_self" href="/uploads/{{eachDocument.modifiedFileName}}" download="{{eachDocument.fileName}}">{{eachDocument.fileName}}</a>
Have used a route in the express server controller, as given in http://expressjs.com/api.html#res.download
Using the method #1 application never downloads the file with an error "Not a file", because uploads is not the public directory.
Using method #2, I'm able to get the raw file content, but not sure how to save the file.
Can anyone please tell me how to implement the file download that are saved in uploads directory that were uploaded using multer.
Thanks
#Sridhar Chidurala, please find my code for the server and view controller:
I'm using the following code for server controller :
var file = __dirname + "/../../" + results.filePath;
res.download(file, results.filename, function (err) {
if (err) {
} else {
}
});
On the view controller, Im posting some data and based on the data I get the file data to the view.:
$http.post(requestString, reqObject).
success(function (response) {
// **I get the file data here**
console.log("success response : " + JSON.stringify(response));
}).error(function (response) {
console.log("error response : " + JSON.stringify(response));
});

How to download .xls file with angularjs sent with readAllBytes

I have in my backend application an spray route that pushes out a .xls file using
FileUtils.readAllBytes(xlsFile)
In my frontend application I'm using angularjs with Restangular module so I need to receive my .xls file and download it to user's computer.
I have in my code
Restangular.one("localhost:9090/excel")
.get()
.then(function(response){
alert("Excel is here!");
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/xls,' + encodeURIComponent(response);
hiddenElement.download = 'reporte-anual.xls';
hiddenElement.click();
});
but it only does the alert.
How can I achieve that?
Thank you all

Resources