21 Oct

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

Leave a reply