Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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!

share|improve this question
add comment

2 Answers

up vote 0 down vote

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>
share|improve this answer
add comment
up vote -1 down vote

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>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.