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

A step-by-step guide on how to implement a window scroll-controlled color transition

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Utilizing Bootstrap Modal to trigger an Action Result function when a button is clicked

What is the best way to replicate the Ctrl+A action on an element using jQuery or JavaScript?

Is there a way to detect when the mobile keyboard is open in a React application?

Is there a way to incorporate an MTN Momo or Orange Money payment system into your application if you are not a registered business entity?

What are the steps to run a webpack project without relying on webpack-dev-server?

Pause a YouTube video automatically when the window is not in focus using FancyBox

Tips for inserting a php variable into an html document

Understanding the mechanics of utilizing node modules and requiring them within an Express 4 router

Exploring the Power of Streams in JavaScript

Achieve consistent action execution for both the footer and header included in all pages using AngularJS

Simple Way to Show API Output in Plain Text (Beginner Inquiry)

Generating a default template for an Angular ag-Grid cell with a custom field name - how to do it?

Embed script tags into static HTML files served by a Node.js server

What is the method for invoking a custom directive's function in AngularJS?

Include a new variable in a JavaScript email template

I am experiencing an issue with the functionality of Handlebars registerPartial()

Identifying sluggish hardware or unresponsive browsers using JavaScript

Is there a way to execute a jar file using JavaScript?