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!
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>
You could do something like I through together: Plunker
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MainCtrl" >
<canvas image-display file-data="{{data}},{{mimeType}},{{fileName}}"></canvas>
</body>
</html>
