File uploads with Angular part 2

We left off last time with a file uploader that was functional, but not without its shortcomings. Let's continue with addressing some of the immediate issues that bothered me.

Emptying the file input

The first thing that was bothering me about the file uploader as we left it last was that while the files were uploaded as soon as they were picked in the file input element, they were left as being selected in the element. Unfortunately, the file list is readonly, so I can't just clear that. However I can replace the used file input with a new one to simulate the list being cleared out. To do this I will need to handle the use of the file-uploader attribute a little differently. If Angular attaches events to a file input element, and then I replace it with a new one, all of Angular's bindings disappear. So I'm going to use an outer element instead.

<-- Partial -->
<div file-uploader="onFileSelected($files)"></div>

I no longer have a file input element so I'll have to handle the creation of that in the directive handler:

// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    var fileInputTemplate = "<input type='file' multiple />"; // jquery template for new file input
    
    return function (scope, $elem, attrs) {
        var fn = $parse(attrs["fileUploader"]);

        var changeFunc = function(e) {
            fn(scope, { $files: e.target.files });

            // Empty the container div and append a new element based
            // on fileInputTemplate and attach the change event handler
            $elem.empty().append( 
                $(fileInputTemplate).on("change", changeFunc)
            );
        };
        
        // Append a new element based on fileInputTemplate and
        //attach the change event handler
        $elem.append(
            $(fileInputTemplate).on("change", changeFunc)
        );
    };
}]);

Since I'm attaching the file-uploader directive on a div instead of an input element, I need to create the input element manually and append it to the div. I'm also declaring a function "changeFunc" which I'm using as the change handler. This is the same as the old event handler, except that in addition to calling fn I'm emptying the container div and appending a new input element with a new change event handler on it.

Adding a file queue

It's rare that someone would want a file to upload immediately upon selection in a file input. It's more likely that a user would want to see the selected files and wait to upload until a form submission. I'm going to modify the controller to populate an array on the scope instead of immediately sending files to be uploaded:

// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.files = [];
        
        $scope.onFileSelected = function ($files) {
            for (var i = 0; i < $files.length; ++i)
                $scope.files.push($files[i]);
            $scope.$apply();
        };
    }
]);

Instead of submitting the files like before, I'm adding them to a scope variable called files. It's now trivial to add a list of filenames to the partial.

<!-- Partial -->
<div file-uploader="onFileSelected($files)"></div>
<ul>
    <li ng-repeat="file in files">
        {{file.name}}
    </li>
</ul>
<input type="button" ng-click="upload()" value="Upload"/>

I went ahead and added a submit button. Since all of the files are stored on the scope, I can use the submit button to loop through those files and post them to the server:

// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.files = [];
        
        $scope.onFileSelected = function ($files) {
            for (var i = 0; i < $files.length; ++i)
                $scope.files.push($files[i]);
            $scope.$apply();
        };

        $scope.upload = function() {
            var formData = new FormData();

            for (var i = 0; i < $scope.files.length; ++i) {
                (function () {
                    var $file = $scope.files[i];
                    formData.append("file", $file, $file.name);
                })();
            }

            var options = {
                method: "POST",
                url: "/api/Import",
                data: formData,
                headers: { "Content-Type": undefined },
                transformRequest: angular.identity
            };

            $http(options).success(function (data, status) {
                if (status != 200)
                    console.log("Error uploading files");
                else {
                    for (var i = 0; i < data.length; ++i)
                        console.log(data[i]);
                    $scope.files.length = 0; // clear the array
                }

            });
        };
    }
]);

The new $scope.upload function should look familiar, it's essentially the old $scope.onFileSelected function.

Styling the file input

Right now the file input still looks like a plain old file input. This means, in Chrome, we will perpetually see the label "No file chosen" even if we have chosen files to upload. I'm going to take a page out of the jQuery File Upload book and style my button like theirs. First I'll need to modify the directive to handle a button caption:

// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    var fileInputTemplate = "<input type='file' multiple />"; // jquery template for new file input

    return function (scope, $elem, attrs) {
        var fn = $parse(attrs["fileUploader"]);

        var changeFunc = function (e) {
            fn(scope, { $files: e.target.files });

            // Empty the container div and append a new element based
            // on fileInputTemplate and attach the change event handler
            $elem.children("input").replaceWith(
                $(fileInputTemplate).on("change", changeFunc)
            );
        };

        $elem.addClass("file-uploader");
        var $button = $(document.createElement("button"));
        var text = $elem.text();
        var $span = $(document.createElement("span")).text(text);

        // Append a new element based on fileInputTemplate and
        //attach the change event handler
        $button.append($span).append(
            $(fileInputTemplate).on("change", changeFunc)
        );
        $elem.empty().append($button);
    };
}]);

There are a few significant differences between this version of the directive and the last. Note line 13. Instead of taking a shotgun approach and emptying the entire container div before appending the new input element, I'm specifically targeting the input element and replacing it. Below that, I am taking the text that was present in the container div and putting it into a span element to target it more easily with CSS. I'm then wrapping the whole thing into a button element that I can also style with CSS.

Speaking of CSS, here are the style rules I'm going to use:

// CSS
.file-uploader button {
    position: relative;
    overflow: hidden;
}

.file-uploader input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor: pointer;
}

This is a stripped down form of how jQuery File Upload styles their input button. It very cleverly mixes the opacity property of the input element (to hide it) with the overflow property of the button to mask the input element from the cursor.

Additional attributes

I'd like to add a couple more attributes for functionality. I'll start with an attribute to specify the maximum number of files and an attribute to signify whether the user would like to append to the current list of files or replace the current list of files every time they click browse.

<!-- Partial -->
<div file-uploader="files" 
     file-uploader-max-files="5" 
     file-uploader-browse-action="replace">Select files</div>
<ul>
    <li ng-repeat="file in files">
        {{file.name}}
    </li>
</ul>
<input type="button" ng-click="upload()" value="Upload"/>

You'll notice that I changed the value of "file-uploader" in the partial to bind directly to the "files" scope property instead of the "onFileSelected" scope property. In order to check for these attributes inside my directive, I'm going to need to refactor my code a bit. Currently the directive serves as nothing more than a traffic cop which redirects the "change" event of the file input to a function that is defined on the controller. I'm going to modify this pattern to bind the attribute directly to the files property on the scope and handle the population directly in the directive (no pun intended).

// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    var fileInputTemplate = "<input type='file' multiple />"; // jquery template for new file input

    return function (scope, $elem, attrs) {
        var scopePropGetter = $parse(attrs["fileUploader"]);

        var maxFiles = $parse(attrs["fileUploaderMaxFiles"])() || attrs["fileUploaderMaxFiles"];
        maxFiles = Math.max(parseInt(maxFiles || 0), 0);
        if (maxFiles == 1)
            fileInputTemplate = "<input type='file' />"; // remove the multiple attribute
        
        var browseAction = $parse(attrs["fileUploaderBrowseAction"])() || attrs["fileUploaderBrowseAction"];
        browseAction = browseAction || "replace";
        if (browseAction != "append")
            browseAction = "replace";

        var changeFunc = function (e) {
            var files = scopePropGetter(scope);
            if (browseAction == "replace")
                files.length = 0;

            var numFilesToAdd = e.target.files.length;
            if (maxFiles > 0)
                numFilesToAdd = Math.min(maxFiles - files.length, e.target.files.length);
            
            for (var i = 0; i < numFilesToAdd; ++i)
                files.push(e.target.files[i]);
            scope.$apply();

            // Empty the container div and append a new element based
            // on fileInputTemplate and attach the change event handler
            $elem.children("input").replaceWith(
                $(fileInputTemplate).on("change", changeFunc)
            );
        };

        $elem.addClass("file-uploader");
        var $button = $(document.createElement("button"));
        var text = $elem.text();
        var $span = $(document.createElement("span")).text(text);

        // Append a new element based on fileInputTemplate and
        //attach the change event handler
        $button.append($span).append(
            $(fileInputTemplate).on("change", changeFunc)
        );
        $elem.empty().append($button);
    };
}]);

// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.files = [];

        $scope.upload = function() {
            var formData = new FormData();

            for (var i = 0; i < $scope.files.length; ++i) {
                (function () {
                    var $file = $scope.files[i];
                    formData.append("file", $file, $file.name);
                })();
            }

            var options = {
                method: "POST",
                url: "/api/Import",
                data: formData,
                headers: { "Content-Type": undefined },
                transformRequest: angular.identity
            };

            $http(options).success(function (data, status) {
                if (status != 200)
                    console.log("Error uploading files");
                else {
                    for (var i = 0; i < data.length; ++i)
                        console.log(data[i]);
                    $scope.files.length = 0; // clear the array
                }

            });
        };
    }
]);

Let's start with the controller. The only thing we changed is we removed the "onFileSelected" function from the scope. As far the directive, there were quite a few changes made. Lines 8-16 deal with reading the values out of the new attributes and making sure they are valid. Lines 19-29 contain the new code that was taken from the old "onFileSelected" function. It handles the population of the whatever scope variable is bound to the directive. Lines 19-25 decide how many files to add based on the maximum file limit as well as clearing out the existing files if "replace" is selected. Lines 27-29 handle appending the new files onto the scope property.

If you've followed along, you should now have a functioning file uploader. It isn't quite feature complete, but I will continue adding to it in future posts.

File uploads with Angular

Uploading a file is a common operation, and in designing an Angular-based site the odds are high that one will eventually need to add support for it. I reached the point in one of my projects where I needed to add support. I've always used the very nice jQuery File Upload plugin, but since I am fairly new to Angular, I want to use this as a chance to explore the behind-the-scenes of creating directives and manually creating HTTP file posts.

Before jumping into any code I'll explain some assumptions. I'll be adding code to three different areas -- the partial, the controller, and the directive. The main javascript file will start off looking something like this:

var app = angular.module("myApp", []); // declare this module, named "myApp". Matches ng-app attribute.

We will assume that my partial file is somehow loaded through some sort of routing.

Now that we have that out of the way, let's jump in.

Creating the directive

First, I'm going to create a directive that I can use for my input tag. According to Angular's documentation, "Directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children." This will allow me to add functionality to an HTML element just by adding an attribute. I'll add a simple attribute to a file input tag like so:

<!-- Partial-->
<input multiple="" file-uploader="" type="file" />

Now that I've added the "file-uploader" attribute, I need to create a directive that's going to pick up on that and add some functionality:

// Directive
app.directive("fileUploader", [function() {
    return function() {
        console.log("It is working.");
    };
}]);

When I load the page I see the console message. Success! Now on to adding more functionality to the directive.

Expanding the directive

// Directive
app.directive("fileUploader", [function() {
    return function (scope, $elem, attrs) {
        $elem.on("change", function(e) {
            console.log("File changed");
        });
    };
}]);

A little more productive, I now have a jquery event handler for when a new file is picked. Say I want the developer to be able to specify his/her own callback function for when a file is picked. Just like any other binding, it will be assigned as a property on the scope:

// Controller
app.controller("ImportController", ["$scope",
    function ($scope) {
        $scope.onFileSelected = function() {
            console.log("onFileSelected called");
        };
    }
]);

<!-- Partial -->
<input multiple="" file-uploader="onFileSelected()" type="file" />

This still won't work, however. Nothing in our application is actually binding this method to the change event of the file input. If you run this as-is, you'll still get the "File changed" log message, but nothing that says "onFileSelected called". So, I need to modify the directive function:

// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    return function (scope, $elem, attrs) {
        // fn will be the callback function
        // injected into the directive attribute
        var fn = $parse(attrs["fileUploader"]);

        $elem.on("change", function(e) {
            fn(scope);
        });
    };
}]);

I've modified the directive function to take the string passed into the file-uploader directive and parse out the scope variable assigned to it. This should return a function, as it should be the custom callback function assigned to the scope. Once assigned to fn, it can be called, passing in the scope as the first parameter. Now when the a file is selected, the onFileSelected function I've added to the scope is called. Next, I'd like to actually get some file information back to the custom event handler. This is located inside the event object [todo -- on what browsers]. I'll make modifications to pass back this information.

// Directive
app.directive("fileUploader", ["$parse", function ($parse) {
    return function (scope, $elem, attrs) {
        var fn = $parse(attrs["fileUploader"]);
        $elem.on("change", function (e) {
            fn(scope, { $files: e.target.files });
        });
    };
}]);

// Controller
app.controller("ImportController", ["$scope",
    function ($scope) {
        $scope.onFileSelected = function($files) {
            console.log("onFileSelected called");
            console.log($files);
        };
    }
]);

<!-- Partial -->
<input multiple="" file-uploader="onFileSelected($files)" type="file" />

Inside the directive function, I've added a second parameter to the fn() call. The first parameter sends the scope, and the second parameter will extend the scope by adding/replacing properties on the scope. This is useful if you'd like to pass extra data to the callback function, but you don't want to make any lasting changes to the scope that other parts of the application could see. I'm using the property name "$files", with the dollar sign signifying that this is not a normal scope variable. Inside the controller, I've modified the onFileSelected function to take one parameter which will be assigned in the partial. Inside the partial, I've modified the file-uploader attribute to pass $files to the onFileSelected function. This completes the circle, and ensures that the callback has the data it needs.

Sending the data to the server

Now I'm going to loop through all of the files that were passed through the $files parameter and put together an HTTP request:

// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.onFileSelected = function ($files) {
            console.log("onFileSelected called");
            console.log($files);
            for (var i = 0; i < $files.length; ++i) {
                (function() {
                    var $file = $files.item(i);

                    var formData = new FormData();
                    formData.append("file", $file, $file.name); // test

                    var options = {
                        method: "POST",
                        url: "/api/Import",
                        data: formData,
                        headers: { "Content-Type": undefined },
                        transformRequest: angular.identity
                    };

                    $http(options);
                })();

            }
        };
    }
]);

Here I've added a loop to go through all of the attached files and issue an HTTP post for each one. I'm taking advantage of the FormData function, as it makes sending complex HTTP request incredibly easy. Unfortunately, FormData is not supported in versions of Internet Explorer prior to 10. I will add support for some older versions of IE in a future blog post. After building the FormData object, I'm adding it to the HTTP options. I'm also setting the Content-Type header to undefined and the transformRequest property to angular.identity, a bit of Angular magic to parse our FormData object. The controller as it stands will issue one request for every file, which is a bit overkill. It can be modified to lump all files together:

// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.onFileSelected = function ($files) {
            var formData = new FormData();
            
            for (var i = 0; i < $files.length; ++i) {
                (function() {
                    var $file = $files.item(i);
                    formData.append("file", $file, $file.name);
                })();
            }

            var options = {
                method: "POST",
                url: "/api/Import",
                data: formData,
                headers: { "Content-Type": undefined },
                transformRequest: angular.identity
            };

            $http(options);
        };
    }
]);

The backend I have this running against will spit out a list of relative paths that the uploaded files can be reached at, so I'm going to add some logging for the response.

// Controller
app.controller("ImportController", ["$scope", "$http",
    function ($scope, $http) {
        $scope.onFileSelected = function ($files) {
            var formData = new FormData();
            
            for (var i = 0; i < $files.length; ++i) {
                (function() {
                    var $file = $files.item(i);
                    formData.append("file", $file, $file.name);
                })();
            }

            var options = {
                method: "POST",
                url: "/api/Import",
                data: formData,
                headers: { "Content-Type": undefined },
                transformRequest: angular.identity
            };

            $http(options).success(function(data, status) {
                if (status != 200)
                    console.log("Error uploading files");
                else {
                    for (var i = 0; i < data.length; ++i)
                        console.log(data[i]);
                }
                    
            });
        };
    }
]);

It's not very pretty, but it functions. In a future post I'll talk about how to add more functionality and dress things up a bit. I eventually want to integrate jquery file uploader, but this is a nice exercise in learning all of the nuts and bolts behind Angular file uploads.

For more information, check out our website.

DropDownListFor with Enums

When creating a dropdown list using the DropDownListFor method off of the html helper, you usually have to manually include all of the list items:

@{
    List<selectlistitem> items = new List<selectlistitem>
    {
        new SelectListItem {Text = "Red", Value = "Red", Selected = Model.FavoriteColor == "Red"},
        new SelectListItem {Text = "Green", Value = "Green", Selected = Model.FavoriteColor == "Green"},
        new SelectListItem {Text = "Blue", Value = "Blue", Selected = Model.FavoriteColor == "Blue"}
    };
}

@Html.DropDownListFor(model => model.FavoriteColor, items)

In this case, FavoriteColor is a string property that has some options on a list for convenience. But what if it was an Enum?

public enum Colors
{
    Red,
    Green,
    Blue
}

We can use some fancy maneuvering and LINQ to create a dropdown list in one command:

@Html.DropDownListFor(model => model.FavoriteColor, Enum.GetValues(typeof(Colors)).Cast<colors>().Select(color => new SelectListItem { Text = Colors.ToString(), Value = Colors.ToString(), Selected = model.FavoriteColor == color }))

This LINQ query uses the static method GetValues to get a list of all entries in an enum. They get casted to their appropriate type and then a new SelectListItem is selected out of them. This works great, but it's a bit too much work. Let's try an HtmlHelper extension method:

public static class HtmlHelperExtensions
{
    public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
    {

    }
}

By creating a new static class and adding it to the same namespace as the view (or adding a "using" statement to the top of the view), we will now see a new overload for the DropDownListFor method which takes only one parameter, the property expression.

@Html.DropDownListFor(model => model.FavoriteColor)

In populating the method, it has to do 5 things:

1. It must establish the name of the property
2. It must establish the type of the property and ensure it is an enum
3. It must get a list of all possible options for the enum
4. It must create a list of SelectListItems
5. Finally, it must return a dropdown list

Here is the complete method in action:

public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
{
    var propertyName = ExpressionHelper.GetExpressionText(expression);
    var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);

    var propertyInfo = metadata.ContainerType.GetProperty(propertyName);

    if (!propertyInfo.PropertyType.IsEnum)
        throw new InvalidParameterException("Must use with a property of an Enum type.");

    var options = Enum.GetValues(propertyInfo.PropertyType).Cast<object>().Select(o => o.ToString()).ToList();
    var descriptions = propertyInfo.PropertyType.GetEnumDescriptions();

    var selectedOption = metadata.Model.ToString();
    var selectList = options.Select(option => new SelectListItem {Text = descriptions[option], Value = option, Selected = option == selectedOption});

    return htmlHelper.DropDownListFor(expression, selectList);
}

For more information, check out our website.