How to Retrieve a Remote File in Angular using $http.get() with OAuth Authentication

Question

How to Retrieve a Remote File in Angular using $http.get() with OAuth Authentication

I have a unique situation where my users possess private files that require downloads by authenticated users. The server I am using initially downloads a file from S3 utilizing its own set of S3 app_id and secret_token credentials. Once the file has been downloaded, it is then compiled and transmitted to the client using Rails' send_data method.

Here's how it looks in Ruby on Rails:

# documents_controller.rb
def download
  some_file = SomeFile.find(params[:id])

  # download file from AWS S3 to server
  data = open(some_file.document.url) 

  # construct and send downloaded file to client
  send_data data.read, filename: some_file.document_identifier, disposition: 'inline', stream: 'true'
end

Initially, my plan was to trigger the download directly from the HTML template as shown below:

HTML:

<!-- download-template.html -->
<a target="_self" ng-href="{{ document.download_url }}" download="{{document.file_name}}">Download</a>

Although this seemed straightforward, I encountered an issue with Angular's $http interceptor not intercepting external link clicks, resulting in missing headers needed for server-side authentication. This led to a 401 Unauthorized Error.

To overcome this challenge, I decided to trigger the download using ng-click and initiating an $http.get() request from the angular controller instead.

HTML:

<!-- download-template.html -->
<div ng-controller="DocumentCtrl">
  <a ng-click="download(document)">Download</a>
</div>

Javascript:

// DocumentCtrl.js
module.controller( "DocumentCtrl",
  [ "$http", "$scope", "FileSaver", "Blob",
  function( $http, $scope, FileSaver, Blob ) {

    $scope.download = function( document ) {
      $http.get(document.download_url, {}, { responseType: "arraybuffer" } )
        .success( function( data ) {
          var blob = new Blob([data], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
          FileSaver.saveAs(blob, document.file_name);
        });
    };
}]);

FileSaver is a useful library for saving files using Blobs on the client side.

This approach helped me resolve the authentication problem, but unfortunately, the downloaded file ended up being saved/downloaded in an unreadable or unusable format.

What could be causing the file to download in an unusable format?

Thank you in advance.

javascript ruby-on-rails angularjs amazon-s3 oauth

Answer 1

Answer №1

To successfully retrieve binary data as a response in Angular, it is necessary to configure the $http method accordingly.

Referencing Rails' send_data documentation:

The send_data method allows for sending binary data to the browser. It provides options for displaying the response as either an attachment or inline content, specifying content type, file name, and more.

In Angular's $http documentation, there is limited information available on configuring responseType for handling binary data responses. Essentially, responseType needs to be set to "arraybuffer" to indicate that the response will contain binary data (as shown below).

$scope.download = function(document) {
  console.log("download: ", document);
  $http({
    url: document.download_url,
    method: "GET",
    headers: {
      "Content-type": "application/json"
    },
    responseType: "arraybuffer" // expect to handle binary data response
  }).success(function(data, status, headers) {
      var type = headers('Content-Type');
      var blob = new Blob([data], {type: type});
      FileSaver.saveAs(blob, document.file_name);
    });
};

It would be beneficial for Angular's $http documentation to provide more detailed explanations rather than just listing the basic usage and arguments.

Usage

$http(config);

Arguments

config

responseType - {string} - see XMLHttpRequest.responseType.

Answer 2

To successfully retrieve binary data as a response in Angular, it is necessary to configure the $http method accordingly.

Referencing Rails' send_data documentation:

The send_data method allows for sending binary data to the browser. It provides options for displaying the response as either an attachment or inline content, specifying content type, file name, and more.

In Angular's $http documentation, there is limited information available on configuring responseType for handling binary data responses. Essentially, responseType needs to be set to "arraybuffer" to indicate that the response will contain binary data (as shown below).

$scope.download = function(document) {
  console.log("download: ", document);
  $http({
    url: document.download_url,
    method: "GET",
    headers: {
      "Content-type": "application/json"
    },
    responseType: "arraybuffer" // expect to handle binary data response
  }).success(function(data, status, headers) {
      var type = headers('Content-Type');
      var blob = new Blob([data], {type: type});
      FileSaver.saveAs(blob, document.file_name);
    });
};

It would be beneficial for Angular's $http documentation to provide more detailed explanations rather than just listing the basic usage and arguments.

Usage

$http(config);

Arguments

config

responseType - {string} - see XMLHttpRequest.responseType.

Answer 3

Answer №2

Hey there! I wanted to share an example of how I handle file downloads from my server using Angular:

First, I make a GET request to retrieve the file:

Here is the HTML code for initiating the file download on the client side:

<a ng-href="/api/downloadFile/{{download.id}}" type="submit" class="btn btn-primary col-lg-12 btn-modal-costume" >Download</a>

And here is the Java code to handle the file download on the server side:

public static Result download(String id) {
        String content = null;
        for (controllers.file file : files) {
            if (file.getId().equals(id)){
                content = file.getContent();
            }
        }
        return ok(new java.io.File("/temp/" + id+ "file" + content)).as("application/force-download");
    }

If you're interested, you can access the full code in my GitHub project

Answer 4

Hey there! I wanted to share an example of how I handle file downloads from my server using Angular:

First, I make a GET request to retrieve the file:

Here is the HTML code for initiating the file download on the client side:

<a ng-href="/api/downloadFile/{{download.id}}" type="submit" class="btn btn-primary col-lg-12 btn-modal-costume" >Download</a>

And here is the Java code to handle the file download on the server side:

public static Result download(String id) {
        String content = null;
        for (controllers.file file : files) {
            if (file.getId().equals(id)){
                content = file.getContent();
            }
        }
        return ok(new java.io.File("/temp/" + id+ "file" + content)).as("application/force-download");
    }

If you're interested, you can access the full code in my GitHub project

Answer 5

Answer №3

It seems like you were heading in the right direction with your approach using JavaScript, but there was a small mistake. Instead of passing an empty object as the second parameter in the $http.get call, you should have included the options argument with {responseType: arraybuffer}. For more information, refer to the documentation for $http.get available at: https://docs.angularjs.org/api/ng/service/$http#get

Answer 6

It seems like you were heading in the right direction with your approach using JavaScript, but there was a small mistake. Instead of passing an empty object as the second parameter in the $http.get call, you should have included the options argument with {responseType: arraybuffer}. For more information, refer to the documentation for $http.get available at: https://docs.angularjs.org/api/ng/service/$http#get

How to Retrieve a Remote File in Angular using $http.get() with OAuth Authentication

Answer №1

Answer №2

Answer №3

Similar questions

Instructions for activating and deactivating a numerical input field with a checkbox

Adding static files to your HTML page with node.js

Switching the active className in React and Next.js based on selection status

Guidance on Implementing Promises in Ionic 2 and Angular 2

Choose to either check or uncheck boxes using ReactJS

No information available at the moment

What could be the reason behind Cesium viewer's failure to show a model after I upload it?

Reorganizing Arrays in Javascript: A How-To Guide

Having difficulty retrieving the value of a variable obtained from the Google Distance Matrix function

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Linking asynchronous functions does not function properly

Unable to invoke JS function in Drupal 5 file

It seems like KineticJS is removing elements from the canvas that I would prefer to keep

Having trouble utilizing a function with an async onload method within a service in Angular - why does the same function work flawlessly in a component?

A concise way to write an else if statement in Javascript and jQuery

Establishing communication between a master process and worker processes in Node.js: A guide to verifying bidirectional communication

Encountered a problem while establishing a connection to Firebase following the upgrade of

How can I display an array of data with a changing name using a FlatList in React Native?

A step-by-step guide to adding a checkbox column dynamically within handsontable

What is the most popular method for namespacing AngularJS modules?