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, CommentedDec 26, 2019 at 14:12
@AlonEitan I have tried that, but I still have nothing shown — user3774763, CommentedDec 26, 2019 at 14:37
The .success method has been removed from the AngularJS framework. — georgeawg, CommentedDec 28, 2019 at 5:14

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

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.

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. — georgeawg, CommentedDec 28, 2019 at 5:13

Collectives™ on Stack Overflow

AngularJS Unable to display upload file logs [duplicate]

1 Answer 1

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Linked

Related