download a file in the browser using angularJS or javascript or jquery

Question

1.00/5 (1 vote)

See more:

we will get the file content (byte array) , its MIME_Type and file name with extension from the API call to the success of hhtp request in angularjs controller now my task is to download it as a file in the browser as normal file download that we see regularly (using angularJS or javascript or jquery).

it should work in IE and chrome for sure.

Please help me.

Code in API controller
----------------------------------------------

// gets file data from Db based on file Id
[HttpGet]
public AttachedFile GetFileData(int fileId)
{
try
{
// id =1010
var fileData = _fileUploadManager.GetFileData(1010);

if (fileData != null)
{
return fileData;

}
else
{
return null;
}
}
catch (Exception ex)
{

throw ex;
}
}

---------------------------------

public class AttachedFile
{

public int fieldId;

public string fileName; // it includes extension of file too

public byte[] fileContent;

//public DateTime createdOn;

}

client side Code :
---------------------------------

// the below code is using in angularJS controller

---------------------------------

var getFileDownloadData = function ( inputParams) { // here inputParams is 1010 which is passed as id to controller API)

$http.get('http://sampleproject/api/FileUpload/', {
params: { '': inputParams }
})
.success(function (data) {
// debugger;
if (data != null) {

// in this data i have the information of file name, extension and fileContent which is byteArray.

// do something to download the file to browser.

}

}).error(function (msg, code) {
console.log(msg+'_'+code);
});

};
-----------------------------------

any kind of help would be appreciated.
thanks in Advance.

Posted 28-Apr-15 2:17am

Rohith Reddy Vadiyala

Updated 28-Apr-15 3:15am

v4

Add a Solution

Comments

[no name] 28-Apr-15 8:47am

Will you please share some code block to understand your requirement?

Rohith Reddy Vadiyala 28-Apr-15 9:14am

I have shared the code that I started with.
any kind of help would be appreciated.
thanks in Advance.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

debasish mishra · Accepted Answer · 2015-04-29T00:20:00

Solution 1

I guess the below URL will resolve your issue.

http://stackoverflow.com/questions/24080018/download-file-from-a-asp-net-web-api-method-using-angularjs

Posted 29-Apr-15 0:20am

debasish mishra

Comments

Rohith Reddy Vadiyala 30-Apr-15 1:58am

do you have any sample data which is a response to success method??
Actually the problem is I could able to download a file (pdf) but while opening it throws error in adobe reader: - "there was an error opening this document. the root object is missing or invalid"

Rohith Reddy Vadiyala · Accepted Answer · 2015-05-03T22:51:00

XML

<!DOCTYPE html>
<html>

<head>
  <title>Using $http.get to read binary data</title>
</head>

<body ng-app>
  <h1>Using $http.get to read binary data</h1>
  <div ng-controller="FetchCtrl">
    Image loaded using the <tt>src</tt> attribute of an <tt>&lt;img&gt;</tt> element:
    <div>
      <img ng-src="{{URL}}" />
    </div>
    Click the following button to fetch the same image dynamically:
    <br/>
    <button ng-click="fetch()">fetch</button>
    <br/>{{info}}
  </div>
  <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
  <script>
    // Controller
    function FetchCtrl($scope, $http) {
      $scope.URL = "http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png";
      $scope.ORIGINAL_SIZE = 473831;
      $scope.info = "";

      $scope.fetch = function() {
        // Resetting headers to Accept */* is necessary to perform a simple cross-site request
        // (see https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Simple_requests)
        delete $http.defaults.headers.common['X-Requested-With'];
        $http.get($scope.URL, {
          responseType: "arraybuffer"
        }).
        success(function(data) {
          $scope.info =
            "Read '" + $scope.URL + "' with " + data.byteLength + " bytes in a variable of type '" + typeof(data) + "'. The original file has " + $scope.ORIGINAL_SIZE + " bytes."

// to download in IE >10 versions
          // Try using msSaveBlob if supported
          console.log("Trying saveBlob method ...");
          var blob = new Blob([data], {
            type: 'image/png'
          });
          console.log(blob);
          if (navigator.msSaveBlob)
            navigator.msSaveBlob(blob, 'Lenna.png');
          else {
            // Try using other saveBlob implementations, if available
            var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
            if (saveBlob === undefined) throw "Not supported";
            saveBlob(blob, filename);
          }
          console.log("saveBlob succeeded");


        }).
        error(function(data, status) {
          $scope.info = "Request failed with status: " + status;
        });
      };
    }
  </script>
</body>

</html>

References:

http://plnkr.co/edit/wjeBsrOgL9KrctmeVedM?p=preview

http://stackoverflow.com/questions/24080018/download-file-from-a-asp-net-web-api-method-using-angularjs