How to display a pic that I uploaded to my controller using my directive

Question

Well, honestly this is my first attempt of working with pic upload in JS. I am working with an Angular project that needs to upload a pic from user and display it on a page. (Very much like we upload our profile pic on facebook, only difference being, this page will be downloaded as pdf later).

I was disappointed to see ng-model do not work with file type. I tried many things and finally made a directive that brings file to my controller (got help from here).

Now that I have file in my $scope.myPic variable. How do I go around using this file. How do I display it. . I tried binding the variable directly {{myPic}}, which didn't work . I tried using (#id).value(). Storing this in variable and binding, which didn't work.

There are other couples of thing I tried, but could not help myself out.

Can someone provide the way of binding image that are uploaded by users from their systems into HTML page in Angular. Any good links are more than appreciated ...

FYI:

My directive fn:

function uploadPicFn($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.picModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
};

my html :

<div class="aw_textarea">
         <label>That's me:{{home.myPic}}</label></br>
         <input class="pd_txtarea" type="file" pic-model="home.myPic"/>
    </div>

Somewhere like ?? RIght now ,all I have is the pic file in my controller variable.. — Saurabh Tiwari
– Saurabh Tiwari, Commented Jul 22, 2016 at 5:22
I think you can start here : stackoverflow.com/questions/19986178/… the issue sound similar — Dan M. CISSOKHO
– Dan M. CISSOKHO, Commented Jul 22, 2016 at 5:37

Yurii Vykaliuk · Accepted Answer · 2016-07-22 05:57:04Z

1

This can be done, for example, with File Reader.

You've mentioned that you got help from here. So I updated jsfiddle from that article with very basic code example of how FileReader can be used. Take a look - jsfiddle

        link: function(scope, element, attrs) {
          var model = $parse(attrs.fileModel);
          var modelSetter = model.assign;
          var img = element.parent().children()[2];
          var reader = new FileReader();
          reader.onload = function (e) {
            angular.element(img).attr('src', e.target.result);
          }

          element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
            reader.readAsDataURL(element[0].files[0]);
        });
    }

answered Jul 22, 2016 at 5:57

Yurii Vykaliuk

1367 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Saurabh Tiwari Over a year ago

Spot on !!!..Few question though. Firstly, Since I don't know much about File Reader. Can you explain what's happening here. Any link will be fine. Secondly, I see, you have written code for post request also. Since I don't really need that (as this page will directly be downloaded as PDF), I am assuming I can skip that part of your code?

Saurabh Tiwari Over a year ago

Another curious question: Can I use this image like a normal variable (passing it between services and all..). Basically, how can I assign it to a scope variable so that I can use it in any img tag..in any page. Kindly bear with me..Can't really check it right now as I do not have my code setup

Yurii Vykaliuk Over a year ago

yes, you can delete the fileUpload service if you don't need it. I just leave it because it was in the jsfiddle example from article.

Yurii Vykaliuk Over a year ago

because you have your image file in your $scope.myPic already, all you need to do is to call the FileReader in controller instead of a link function and save the result to some variable. Then, in any page that is under your scope, just write <img src="{{FileReaderSavedData}}" alt="">

Saurabh Tiwari Over a year ago

Yup..that's sorted out..Only doubt i have now is how to bind this image at any other location. Say I want to upload it on one page and then keep it with me for a while and display it on another page..which is a different state

|

Collectives™ on Stack Overflow

How to display a pic that I uploaded to my controller using my directive

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related