angular dropzone uploader

index.html

 <div ng-show="!item.edit">
      <div ng-if="item.row.logo" >
          <img ng-src="uploads/mdpi/{{item.row.logo}}" style="max-width: 80px;"/>
      </div>
      <div ng-if="!item.row.logo"><i>No image selected</i></div>
  </div>
  
  <div class="dropzone">
      
      
      <upload ng-show="!item.row.logo" ng-model="item.row.logo">Drop image here</upload>
      
      
      <div ng-if="item.row.logo" >
          <img ng-src="uploads/mdpi/{{item.row.logo}}" style="max-width: 80px;"/>
          <button class="btn btn-xs btn-danger" type="button" ng-click="removeImage(item)" >Remove</button>
      </div>
  </div>



<script>
  app.directive('upload', ['$http', function($http) {
        return {
            require: 'ngModel',
            restrict: 'E',
            link: function(scope, elm, attrs, ctrl) {
                var instance = new Dropzone(elm[0], {
                    url: 'api/uploader/image',
                    maxFilesize: 1,
                    paramName: 'image',
                    addRemoveLinks: true,
                    maxFiles: 1
                });

                instance.on('success', function(file, response) {
                    ctrl.$setViewValue(response.path);
                    console.log(response);
                    scope.$apply();
                });

                instance.on('removedfile', function(file) {
                    if (ctrl.$viewValue && typeof ctrl.$viewValue.path === 'string') {
                        $http.post('api/uploader/remove', {file: ctrl.$viewValue});
                    }
                });
            }
        };
    }]);
</script>