How to create File object in AngularJS ?

Hi Naiyar88,

Are you trying to upload a file?

Use <input type="file">

I'm currently using angular-material-fileinput so the code looks a bit different but it does use <input type="file"> under the hood so I think you can figure it out:

// upload.html
// left out code for brevity
 <lf-ng-md-file-input lf-files="vm.filesToUpload"> </lf-ng-md-file-input>

// upload.controller.js
// left out code for brevity
(function() {

  "use strict";

  angular.module('Contracts').controller('UploadController', UploadController);

  UploadController.$inject = [
    'FileProviderService',
  ];
  function UploadController(FileProviderService) {
    var vm = this;

    vm.filesToUpload = [];
    vm.submit = submit;

    function submit() {
      FileProviderService.uploadFile(vm.filesToUpload, function(response) {
          // do stuff if success
        },
        function error(err) {
          // do stuff if error
        })
    }

  }

})();
// file-provider.service.js
// left out code for brevity
(function() {

  "use strict";

  angular.module('Services').factory("FileProviderService", FileProviderService);

  FileProviderService.$inject = [
    '$resource',
    'ENV_VARS'
  ];

  function FileProviderService($resource, ENV_VARS) {
    var url = ENV_VARS.FILE_PROVIDER_SERVICE_URL;
    var Resource = $resource(url, {}, {

      uploadFile: {
        method: 'POST',
        url: url + '/path',
        headers: {
          'Content-Type': undefined
        },
        transformRequest: function(data) {
          var formData = new FormData();
          angular.forEach(data, function(fileObj, index, files) {
            formData.append("filesToUpload", fileObj.lfFile);
          });
          return formData;
        }
      }
      // ******************************************* //
      // more file provider methods defined down here
      // ******************************************* //
    });

    return Resource;
  }

})();

Thank you

First we write the directive to gain access to the file object in our controller. In the snippet below, file-model is an attribute on a file input element, and its value is the name of the variable in our controller’s scope that binds to the file object.

.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

In the link function of the above directive, we listen for changes to the content of the input element and change the value of the variable in the scope accordingly. This is achieved using the $parse service to set the value in our scope. The markup required in the view for the directive to work is simple:

<input type="file" file-model="myFile"/>

To have the file upload input handle the selection change event, what I had to do is use angular.element() to query the hidden file upload input and assign an event-handling method to it:

angular.element("#fileUploadField").bind("change", function(evt) { if (evt) { ... } });

Also, follow us https://www.codeproject.com/Articles/5163873/Upload-File-with-AngularJS-using-ngResource

There is an input control available in HTML that does this. I know. What I need is not this predefined input control. What I need is a readonly text field, and a button grouped together. The button can be clicked and pops up the File Open dialog so it can be used to select a file. The text field will display the file name. With Bootstrap, this is very easy to define:

<div class="input-group">

<input type="file" id="fileUploadField" style="display: none;">

<input type="text" id="fileNameDisplayField" class="form-control"

ng-model="vm.uploadFileName" placeholder="File to Upload" readonly="readonly">

<div class="input-group-addon btn btn-default"

ng-click="vm.clickSelectFile()"><i class="glyphicon glyphicon-file"></i></div>

</div>

In the code snippet above, there are some attributes specific for AngularJS. You can ignore these for now. The outer <div> element has CSS class "input-group". It can smash multiple input control into one. With the above code snippet, it will create an input control