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

Hello,

I want to create a File object in AngularJS

In javascript it is very simple to create file object just like that :

var assetLocalPath=" C:/Users/Pictures/flower..jpg";

var file = new File([""],assetLocalPath);

alert(file);

It will alert [object File]

Same as above I would like to create in AngularJS, but I am getting an error " TypeError: File constructor cannot be called in nwdisabled frame "

Please suggest.

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

or https://onlineitguru.com/angularjs-online-training-placement.html