File pick with Angular JS

Question

I would like to pick up a file with AngularJS:

HTML:

Answer 1

I have made a directive. Here is the fiddle.
The application works for picking csvs and showing them as html tables.
With on-file-change directive, you would be able to define the file reading and parsing (with services, may be) logic in the controllers itself which will provide more flexibility. Just for the note, the ac.onFileChange function passed to on-file-change attribute will become the handler for input change event inside directive.

(function (angular, document) {

   angular
      .module("app.directives", [])
      .directive("onFileChange", ["$parse", function ($parse) {
         return {
            restrict: "A",
            link: function (scope, ele, attrs) {
               // onFileChange is a reference to the same function which you would define 
               // in the controller. So that you can keep your logic in the controller.
               var onFileChange = $parse(attrs.onFileChange.split(/\(/)[0])(scope)
               ele.on("change", onFileChange)
               ele.removeAttr("on-file-change")
            }
         }
      }])

   angular
      .module("app.services", [])
      .service("Parse", ["$q", function ($q) {
         var Parse = this
         Parse.csvAsGrid = function (file) {
            return $q(function (resolve, reject) {
               try {
                  Papa.parse(file, {
                     complete: function (results) {
                        resolve(results.data)
                     }
                  })
               } catch (e) {
                  reject(e)
               }
            })
         }
      }])

   angular
      .module("app", ["app.directives", "app.services"])
      .controller("appCtrl", ["$scope", "Parse", function ($scope, Parse) {
         var ac = this
         ac.fileName = ""
         ac.onFileChange = function (event) {
            if (!event.target.files.length) {
               return
            }
            Parse.csvAsGrid(event.target.files[0]).then(outputAsTable)
         }

         ac.clearInput = function (event) {
            var input = angular.element(event.target)
            input.val("")
            document.getElementById("output").innerHTML = ""
         }

         function outputAsTable(grid) {
            var table = ['']
            grid.map(function (row) {
               table.push('')
               row.map(function (cell) {
                  table.push('')
               })
               table.push('')
            })
            table.push('
' + cell.replace(/["']/g, "") + '
')
            document.getElementById("output").innerHTML = table.join("\n")
         }
      }])

})(angular, document)

table {
  border-collapse: collapse;
}

  Select a comma delimited CSV file:-  
  {{ac.fileName}}