Friday, December 12, 2014

AngularJS Easiest way to upload a file

Here is the easiest way to include an upload file in your angular. This is not the angular way of doing the upload, but will get the work done. If you are doing a prototype or in a hurry, then you can use this approach.

I just have a simple view which allows user to select a file and upload it on a button click. Here is the view code.

    <div ng-controller="fileUploader">
        <input type="file" onchange="angular.element(this).scope().setFile(this)">
        <br />
        <button ng-click="UploadFile()">Upload</button>
    </div>

As you see in the above code, I defined a controller with a file input and button. On clicking the button will upload the file to the server.

Here is the angular script which sets the uploaded file to the scope and then uploads the file on the button click

'use strict';
angular.module('pos').controller('fileUploader', fileUploader)
fileUploader.$inject = ['$scope', '$http'];

function fileUploader($scope, $http) {
    $scope.setFile = function(element) {
        $scope.currentFile = element.files[0];
    }

    $scope.UploadFile = function () {
        var formData = new FormData();
        formData.append("file", $scope.currentFile);
        return $http.post("/api/user", formData, {
            headers: { 'Content-Type': undefined }, transformRequest: angular.identity
        });
    }
};


As mentioned above this is a hack solution. In my next blog I will rewrite this in an angular way by defining a directive and using it.

Monday, December 8, 2014

AngularJS Material to Replace Bootstrap

AngularJS team along with Ionic team is developing a framework that I believe is going to replace the Bootstrap and may become the defacto standard for Angular development. Right now Angular Material is in the beta stage and have few components (more is on the way). It also has a layout design much more advanced than that of the Bootstap grid system.

Please take a look at the Material Design presentation at ng-europe 2014

Also go to their demos and docs at

I just rewrote my app which was using Bootstrap to use this material design and I likeed it very much. Angular Material’s layout is much more easy to use and can do more than the Bootstrap css. It is very easy to do vertical alignment, I have to jump several hoops to do the same with Bootstrap.

Angular Material components have a good animation which improves the user experience. It also have some additional components which improve your productivity. Similar to any other frameworks, Angular Material is also designed with mobile first approach.


I strongly recommend to use this Angular Material in your angular apps.