Search code examples
angularjsfile-uploadfileapi

What is fileAPI ? How do I use it with angular?


I'm creating a function so that I can upload files to my server through the use of AngularJS. While browsing I saw this amazing piece of work on github by daniel farid ( link - https://github.com/danialfarid/ng-file-upload ) But the problem is its too much for me to understand. I'm starting out with more of basic stuff. I'd be delighted to hear back from you. Thanks


Solution

  • Try using this directive in the controller.

    app.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]);
                    });
                });
            }
        };
    }]);
    

    Html

     <input type="file" name="file" class="file-input-wrapper btn btn-default btn-primary" file-model="uploadFile" id="control" />
    

    while going back to your controller: the uploaded file will be available within the $scope.uploadFile