I have a Node/Express application and attempting to retrieve file information for upload from an Angular/Ionic front end. I created a separate Service on Angular to get the Image name which works. My real problem is getting the file itself and uploading it to the server from Angular. How would I get the image file for uploading from the Angular front end side?
Below is my code:
<div class="item-input">
<!--list item-->
<div data-ng-repeat="user in users">
Username: <input type="text" placeholder="Enter the event name" name="username" ng-model="user.username" required>
Password: <input type="password" placeholder="Enter the password" name="password" ng-model="user.password" required>
<!--more items that I will omit from this-->
Profile Image:
<div ng-if="user.imageurl">
{{ user.imageurl }}
<button class="button button-block button-positive" ng-click="removepropic()">Remove Image
</button>d
<div ng-repeat="step in stepsModel">
<img class="thumb" ng-src="{{ step }}" style="width:100px; height:100px" />
</div>
<input type="file" ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" />
</div>
<button class="button button-block button-positive" ng-click="editprofile(user)">
Edit Account
</button>
<button class="button button-block button-positive" ng-click="deleteprofile()">
Delete Account
</button>
</div>
Controller JS file
.controller('ProfileUpdateCtrl', function($http, $state, $http, $cordovaOauth, $stateParams, $rootScope, $scope, UserFac, UploadFac) {
id = $stateParams.id;
$scope.user = {};
UserFac.getUser(id).success(function(data) {
$scope.users = data;
});
$scope.editprofile = function(user) {
username = user.username;
password = user.password;
firstname = user.firstname;
lastname = user.lastname;
birthday = user.birthday;
hometown = user.hometown;
email = user.email;
mark = { hometown: hometown, username: username, password:password, email:email, firstname:firstname, lastname:lastname,birthday:birthday };
setmark = angular.toJson(mark);
UserFac.updateUser(id, setmark);
//reload to current controller
$state.reload({'reload':true});
}
//Remove Profile Image from Database.
$scope.removepropic = function(user) {
blank = [];
mark = { imageurl:blank };
setmark = angular.toJson(mark);
UserFac.updateUser(id, setmark);
}
//Image Uploading
$scope.stepsModel = [];
$scope.imageUpload = function(element) {
var reader = new FileReader();
reader.readAsDataURL(element.files[0]);
file = element.files[0];
mark = { imageurl:element.files[0].name };
setmark = angular.toJson(mark);
//upload image to AWS
UploadFac.sendImg(file);
//send information to database
UserFac.updateUser(id, setmark);
console.log(element.files[0]);
}
//Terminate Profile
$scope.deleteprofile = function() {
UserFac.deleteUser(id);
$state.go('home');
}
})
