AngularJS Unable to display upload file logs [duplicate]

Question

I am trying to create a file upload function using angularjs which will just accept the file and send it to the server side (Django). To ensure the file upload function is working fine, I've placed multiple console.log in multiple locations. However, none of the logs are displayed. This are my codes:

.html:

<body ng-app="myApp" ng-controller="appCtrl">
     <input type="file" id="file" name="files" accept="text/*" 
            data-url="file" class="inputfile_upload"
            ng-model="uploadedFile"/>
     <label for="file"> <span id="chooseFile"></span>Upload a file!</label>
     <button id="submitBtn" type="submit" ng-click="upload()"
             ng-model="uploadBtn">Upload</button>
</body>

directive.js:

app.directive("appDirective", function() {
    return {
       restrict: 'A',
       link: function(scope, element, attrs) {
          var model = $parse(attrs.appDirective);
          var modelSetter = model.assign;
          element.bind('change', function() {
             scope.$apply(function() {
                modelSetter(scope, element[0].files[0]);
             });
          });
       }
    };
});

controller.js:

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    $scope.$watch('uploadBtn', function (newVal, oldVal) {
        var submitBtn = document.getElementById('submitBtn');    
        $scope.upload = function() { 
            if(newVal == true){
                $scope.upload = function() { 
                   var file = $scope.uploadedFile; 
                   console.log('file is ' );
                   console.dir(file);
                   var uploadUrl = "/file";
                   fileUploadService.uploadFileToUrl(file, uploadUrl);
                   $http({
                     method:'GET'
                   })
                   .success(function(data) {
                     console.log("success");
                   })
                   .error(function(data){
                     console.log("failed");
                   })
               };
            }
        }
    )}

Service.js:

app.factory('fileUploadService', function ($rootScope, $http) {
   var service = {};
   service.uploadFileToUrl = function upload(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        console.log("Files added");
        })
        .error(function(){
        console.log("Files not successfully added");
        });
    }
    return service;
});

Controller and service, $http.post() returns a promise, it should be $http.post().then(function(response) { <success logic> }, function(response) { <error logic> }); — Alon Eitan
– Alon Eitan, Commented Dec 26, 2019 at 14:12
@AlonEitan I have tried that, but I still have nothing shown — user3774763
– user3774763, Commented Dec 26, 2019 at 14:37
The .success method has been removed from the AngularJS framework. — georgeawg
– georgeawg, Commented Dec 28, 2019 at 5:14

georgeawg · Accepted Answer · 2019-12-26 16:17:10Z

1

The ng-model directive does not work with <button> elements:

 <button id="submitBtn" type="submit" ng-click="upload()"
         ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶u̶p̶l̶o̶a̶d̶B̶t̶n̶"̶ >Upload</button>

Simply assign a function to $scope.upload:

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    ̶$̶s̶c̶o̶p̶e̶.̶$̶w̶a̶t̶c̶h̶(̶'̶u̶p̶l̶o̶a̶d̶B̶t̶n̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶n̶e̶w̶V̶a̶l̶,̶ ̶o̶l̶d̶V̶a̶l̶)̶ ̶{̶ 
        ̶v̶a̶r̶ ̶s̶u̶b̶m̶i̶t̶B̶t̶n̶ ̶=̶ ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶s̶u̶b̶m̶i̶t̶B̶t̶n̶'̶)̶;̶
        ̶$̶s̶c̶o̶p̶e̶.̶u̶p̶l̶o̶a̶d̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶
            ̶i̶f̶(̶n̶e̶w̶V̶a̶l̶ ̶=̶=̶ ̶t̶r̶u̶e̶)̶{̶
                $scope.upload = function() { 
                   var file = $scope.uploadedFile; 
                   console.log('file is ' );
                   console.dir(file);
                   //...
                };
    //...
})

The console.log statements will show upon clicking the button.

answered Dec 26, 2019 at 16:17

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

georgeawg Over a year ago

The <input type="file"> element does not work with the ng-model directive wothout a custom directive. Review the marked duplicate and ask a new question if needed.

Collectives™ on Stack Overflow

AngularJS Unable to display upload file logs [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related