CODEWITHSUNDEEP
javascriptangularjs
devdropper87
devdropper87

Reputation: 4187

image uploading directive angular js

I'm new to writing directives in Angular and was following along with the egghead tutorial on file uploaders, and managed to get my file uploader to work with express/multer. I have this really weird behavior though--- once the file is chosen, one of those ugly default image shows up:

ugly alt image showing up--why?

When I click "upload" everything is fine (except for Kim Kardashian of course):

enter image description here

Here is my angular code. I think everything is working fine on the server side:

Controller/Directive:

angular.module('MyApp')
  .controller('ProfileCtrl', function ($scope, $http, $rootScope, Profile) {
    // $rootScope.currentUser = user;
    $scope.user = $rootScope.currentUser;
    $scope.name = $scope.user.name;
    $scope.imageData = null;
    $scope.pictures = $scope.user.facebook ? $scope.user.facebook.pictures : $scope.imageData;

    // console.log($scope.user);
    $scope.filesChanged = function (elm) {
      $scope.files = elm.files;
      $scope.apply();
    };

    $scope.upload = function () {
      var fd = new FormData();
      angular.forEach($scope.files, function (file) {
        fd.append('file', file);
      });

      $http.post('upload', fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }

      }).success(function (data) {
        $scope.imageData = data;
        console.log($scope.imageData);
      });
    };
  })
  .directive('fileInput', ['$parse',
    function ($parse) {
      return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
          elm.bind('change', function () {
            $parse(attrs.fileInput)
              .assign(scope, elm[0].files);
            scope.$apply();
          });
        }
      };
    }
  ]);

html:

<center>
    <h3>Your Profile</h3>
</center>
<h4 class="col-sm-2 sidebar">{{name}} </h4>
<div class="col sm-2 col-sm-offset-2 sidebar" ng-if="user.facebook">
    <img data-ng-src="{{pictures}}">
</div>
<div>

    <br> Change Your Profile Picture:
    <br>
    <form ng-controller="ProfileCtrl">
        <input type="file" file-input="files" multiple />
        <button ng-click="upload()">Upload</button>
        <li ng-repeat="file in files">{{file.name}}
        <img src="data:image/png;base64,{{imageData}}">
        <button ng-click="saveImage()">
            Save New Profile Picture
        </button>
        </li>
    </form>
</div>

In addition to this specific issue, I'm not grasping at a high level what the purpose of the directive is. why couldn't I just ng-repeat with data returned from the '/upload' route in multer?

UPDATE:

thanks to @jontewks, I figured it out. For some reason I declared $scope.imageData = null

in the top of my controller. once I removed that it worked!

Upvotes: 0

Views: 518

Answers (1)

jontewks
jontewks

Reputation: 458

The reason the image doesn't show up until you hit upload is that the is looking for {{imageData}} on the $scope but that isn't available until the .success of the http.post happens. See if there is a way to use the file data before uploading occurs and that will solve the issue.

Upvotes: 1

Related Questions