21 Oct 2016

Simple solutions for file download with HTML and Angular.js

Download icon

I was recently given an assignment where I needed to create a web app where a user could view a file from a remote server. They also needed to be able to hit a button to download that file. I had never built a download button, but the task seemed like it would be simple. I did a bit of research to see how other developers had attacked this problem in the past and what I found was that there were a few different ways to solve this.  There were node packages and quite a few unnecessarily complicated solutions that I came across. In the end the solution was using simple HTML  and Angular.js.  In the following blog post we will look closer at the HTML download attribute and how it can be used to make an application that dynamically downloads remote files.

 

The HTML Download Attribute

There is a download HTML attribute that can be used in a few different ways to create links, forms and buttons that allow you to download a file. If you have one set local file you want to create a download button for this is great! One line pointing to one file. You can even set the download name to something other than the original if you need to. Here are three ways to use the download attribute.  

 

As a link

<a href="path" download="new_file_name.fileType">Download</a>

As a button

 <a href="path" download="new_file_name.fileType"> <button>Download</button></a>

Using it in a form

<form method="get" action=”path.doc">

<button type="submit">Download</button>

</form>

 

Using the HTML Download Attribute to Solve my Problem

I now know that I can download a file using HTML. I know that I can get access to my remote files using an HTTP call. I created a quick function that switches out the selected files and injects them into the HTTP call I am making in order to switch files that the user is viewing and have them ready to download when the user hits the download button. Here is the code I used to do that.

 

The HTML

Here I use Angular’s ng-repeat to create a list of buttons that can be clicked to handle the method that sets the viewing and downloading of each file. Then I have used the HTML download attribute on a button that triggers the download of that file.

<h1>My File</h1>
</p>{{fileData}}</p>
<br>

<h2>Select a file</h2>
    <div ng-repeat="file in fileList">
        <button ng-click="setCurrentFile(file)">{{file}} </button>
    </div>

  <a href="myFile" download="{{file}}.filetype"> <button>Download</button></a>

 

The JavaScript

In my JavaScript I have my setCurrentFile method that I am calling in my HTML. When that gets hit it will set the myFile variable that we will use as the path to hit the server on out download button. It will also be passed to the jsonpServer method that will retrieve the data the user will view.

$scope.jsonpServer: function(myFile, callback) {
    $http.jsonp(myFile).success(function(data) {
        callback(data);
    }).
    error(function(data, status, headers, config) {
        callback(data);
    })


    $scope.setCurrentFile = function(file) {
        $scope.myFile = 'http://serverName/' + fileName '?callback=JSON_CALLBACK';
        $scope.jsonpServer(myFile, function(data) {
            $scope.fileData = data;
        })
    }
}

 

 

In Conclusion

When developing an application there are usually many ways to do one thing. Sometimes you can reach a solution with just a few lines of code. The HTML download attribute is a good example of how you can customize a simple HTML element to make a dynamic feature for an app without spending tons of time.

Share this
10 Sep 2015

Getting Your Feet Wet with Angular Animations

Imagine you get into a car start the engine, touch the acceleration and go from 0 to 60 in the blink of an eye. You then take the wheel to turn right and instead of a smooth turn the car takes an immediate 90 degree turn.

This is how interface design feels without smooth transitions. It works, but it does not feel natural to the user. Animations can give your design the illusion of depth and lifelike motion, creating a more 3D space and giving the user the feeling of being inside the design.

read more
Share this
16 Apr 2014
16 Jan 2014

Part 1: 2014 RealEyes Speaks!

At RealEyes we have always had a policy of sharing things that we know and learn with the community. Take a look at what we will be doing in 2014 to expand our horizons. Join us at any upcoming sessions and stay tuned as we update our schedules!

read more
Share this
02 Jan 2014
09 Dec 2013
06 Nov 2013

Rendering Issues in Safari with Video and AngularJS

AngularJS is an incredibly powerful JavaScript Framework that extends HTML and will largely change the way you think about Web Application development. However, when exploring the limits of any new technology, you’re bound to discover a few quirks. So far, we’ve found a few rendering issues that come up when working with HTML5 video and Angular in Safari. I will break down the challenges RealEyes faced when working with this new technology, as well as equip you with the steps we took to handle the resulting issues.

read more
Share this

© 2017 RealEyes Media, LLC. All rights reserved.