Displaying an Image after uploading in Angular JS?
14,035
It's more the javascript issue. As was answered here this answer. In angular it should look like this:
<!doctype html>
<html lang="en">
<head >
<meta charset="UTF-8">
<title>Upload Image</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp', []).
controller('UploadCtrl', ['$scope', function (scope) {
scope.image = "";
}]).
directive('myUpload', [function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var reader = new FileReader();
reader.onload = function (e) {
scope.image = e.target.result;
scope.$apply();
}
elem.on('change', function() {
reader.readAsDataURL(elem[0].files[0]);
});
}
};
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="UploadCtrl">
<img ng-if="image" src="{{image}}" alt="">
<form action="">
<input my-upload type="file" name="upload">
</form>
</div>
</body>
</html>
Related videos on Youtube
Author by
user1871869
Updated on June 21, 2022Comments
-
user1871869 almost 2 years
I have a question. So I found that you can upload an image in HTML and I used the following code:
<form name="imageUpload" method="post"> <input type="file" multiple accept = image/* name="uploadField"/> </form>
However, in light of using AngularJS, I was wondering if there was a way to, upon uploading the image, display the image in another location on the screen. If someone can point me in the right direciton, tha would be great! Thanks!