Learn how to effortlessly download a file from Amazon S3 using Angular and ng-click technology

When attempting to download a file from my Amazon S3 bucket using Angular's ng-click, I am receiving a blank file instead of the expected content.

HTML

<div class="details-field"> RC Book 
  <font class="digit" >({{rcCount}})</font> : <i class="fa fa-angle-down fa-button" ng-click=download() ></i>
</div>

Angular Script

var awsUrl = https://s3.amazonaws.com/thdoc/ ;
$scope.download = function() {
  $http.get(awsUrl, {
    responseType: "arraybuffer"
  })
  .success(function(data) {
     var anchor = angular.element('<a/>');
     var blob = new Blob([data]);
     anchor.attr({
       href: window.URL.createObjectURL(blob),
       target: '_blank',
       download: 'RCBook_406_20170328_222831_644.jpg'
     })[0].click();
  })
}

If anyone has insight into resolving this issue, it would be greatly appreciated.

Thank you

Answer №1

For a solution, consider implementing the following:

<a href="{{ url }}" target="_blank" >Secure Link</a><br><br>

DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Tinymce to automatically send form on blur action

Attempting to trigger form submission upon blur event in Tinymce, but encountering difficulties. tinymce.init({ selector: 'textarea.html', menubar:false, force_br_newlines : true, force_p_newlines ...

Can you explain the purpose of useEffect in React?

As a beginner in learning React, I have been able to grasp the concept of the useState hook quite well. However, I am facing some difficulties understanding the useEffect hook. I have tried looking through the documentation, searching online, and even wat ...

Revert animation back to its initial position with the help of JavaScript

After implementing the script below, I successfully managed to shift my image to the right upon clicking: <script> var myTimer = null; function move(){ document.getElementById("fish").style.left = parseInt(document.getElementById("fish ...

Click to reveal the hidden div located at the bottom of the webpage

I have created a simple webpage where all the content is visible without the need to scroll down. However, there is additional content at the bottom that I want to keep hidden until the user chooses to see it. The idea is to have a phrase at the bottom o ...

express.js and socket.io compatibility perplexity

Server-Side Code: var server = require("http").Server(express); var io = require("socket.io")(server); server.listen(5000); io.on('connection', function(client) { client.on('order', function(data) { io.emit('place_orde ...

Sending multiple values with the same name via AJAX using PHP

I'm facing an issue with my code: <form method="post" id="result-image" name="result-image" action="" > <?php $i=1; foreach ($data as $key => $datas) { ?> <div class="col-md-2 thumb custom-size col-lg-3 col-xs-4"> ...

Getting started with ASP.NET vNext 1.0.0-rc1-update1 live stream!

We began working on the project in beta 7 and successfully implemented most of the functionality in version 1.0.0-rc1-update1. Our primary authentication method is MVC and we use web API to provide data. The majority of the functionality resides in client- ...

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

What could be causing the data to not load from the database when the page is loaded?

My current setup involves a button that triggers a specific function upon loading. return ( <> <LikeButtonStyle onLoad={getUserData} onClick={addInfo}> <Image width="10px" height="auto" src="/ ...

Experiencing difficulties with the angular directive designed to eliminate a DOM element, it appears this feature is not functioning as expected in

I have created a directive that removes a DOM element after checking for permissions: angular.module('app').directive('permissionNeeded', function ($location, $route, SecurityService) { return { restrict: 'A', ...

Enhance and soften images using CSS with smooth responsiveness across all web browsers

When an image is clicked, it should zoom in and become the background of the page with a blurred effect. I attempted to achieve this using the following code... <style type="text/css"> body{ position: absolute; margin-left: 100px; right: 0; z-inde ...

How can I automatically close all other menus when clicking on a specific menu in AngularJS?

Using the toggle menu from Simple Toggle has been useful, but I am facing an issue where clicking on a specific menu should close all other menus, similar to how an accordion menu behaves. Directive : element.bind('click', function() { ...

Transform yaml strings into JSON entities

We are facing a challenge with two separate codebases that have different localization styles. One codebase uses yaml, while the other uses JSON. Currently, we are working on transitioning to the JSON-based codebase. However, with 20k yaml strings and sup ...

How does the question mark symbol (?) behave when utilizing it in response? Specifically in relation to data, the API, and the fetch API

Have you encountered the curious sequence of symbols in this context? data?.name Could you explain the significance of the question mark (?) between 'data' and the period? ...

Utilizing ReactJS onBlur event for email field validation

Currently, I am using a MaterialUI Textfield for email input validation upon leaving the field. To achieve this, I have implemented a function triggered when the onBlur event occurs. My intention is to display an error message using helpertext. Here' ...

Formatting currency in Spanish using intl.NumberFormat displays inaccurate results

Based on my research, the output for es-ES and de-DE locale should be different. (I consulted with a Spanish colleague about this issue, and he mentioned that there is indeed a decimal after thousand in Spain) var number = 1000; console.log(new Intl.Numbe ...

Learn more about how AngularJS uses the $q and $http services to manage promises

Regarding $http as described in the official documentation: The $http API is built on top of the deferred/promise APIs provided by the $q service. The $http service is a function that accepts a single argument - a configuration object - to create an HTTP ...

Sending information to a jQuery UI Dialog

I'm currently working on an ASP.Net MVC website where I display booking information from a database query in a table. Each row includes an ActionLink to cancel the booking based on its unique BookingId. Here's an example of how it looks: My book ...

How is the height or width of the Bootstrap modal determined?

I'm having trouble utilizing Jschr's modified Bootstrap-Modal for different modal sizes. I can't seem to understand why some modals appear taller, wider, or have other specific dimensions. For more information, refer to the documentation: ...

What is the best way to transform a JSON array in text format into a JSON object array using NodeJS or JavaScript?

I have a RESTful API built with Node.JS and ExpressJS. I want to retrieve a JSON array from the FrontEnd and pass it into my API. api.post('/save_pg13_app_list', function (req, res) { var app_list = { list_object: req.body.li ...