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