Angularjs jQuery FIle Upload

Question

I'm new at Angularjs and I'm trying to create an AngularJS project with jQuery File Upload but I could not distinguish between directives file controllers file and the view.

Can anyone help me by providing me a clear structure of how files should be placed? (controllers, directives, and view)

Answer 1

I wrote something for my very first Angular.js project. It's from before there was an Angular.js example, but if you want to see the hard way, you can have it. It's not the best, but it may be a good place for you to start. This is my directives.js file.

(function(angular){

  'use strict';

  var directives = angular.module('appName.directives', []);

  directives.directive('imageUploader', [

    function imageUploader() {
      return {
        restrict: 'A',
        link : function(scope, elem, attr, ctrl) {
          var $imgDiv = $('.uploaded-image')
            , $elem
            , $status = elem.next('.progress')
            , $progressBar = $status.find('.bar')
            , config = {
                dataType : 'json',
                start : function(e) {
                  $elem = $(e.target);
                  $elem.hide();
                  $status.removeClass('hide');
                  $progressBar.text('Uploading...');
                },
                done : function(e, data) {
                  var url = data.result.url;
                  $('<img />').attr('src', url).appendTo($imgDiv.removeClass('hide'));
                  scope.$apply(function() {
                    scope.pick.photo = url;
                  })
                  console.log(scope);
                  console.log($status);
                  $status.removeClass('progress-striped progress-warning active').addClass('progress-success');
                  $progressBar.text('Done');
                },
                progress : function(e, data) {
                  var progress = parseInt(data.loaded / data.total * 100, 10);
                  $progressBar.css('width', progress + '%');
                  if (progress === 100) {
                    $status.addClass('progress-warning');
                    $progressBar.text('Processing...');
                  }
                },
                error : function(resp, er, msg) {
                  $elem.show();
                  $status.removeClass('active progress-warning progress-striped').addClass('progress-danger');
                  $progressBar.css('width', '100%');
                  if (resp.status === 415) {
                    $progressBar.text(msg);
                  } else {
                    $progressBar.text('There was an error. Please try again.');
                  }
                }
              };
          elem.fileupload(config);
        }
      }
    }
  ]);

})(window.angular)

I didn't do anything special for the controller. The only part of the view that matters is this:

    <div class="control-group" data-ng-class="{ 'error' : errors.image }">
      <label class="control-label">Upload Picture</label>
      <div class="controls">
        <input type="file" name="files[]" data-url="/uploader" image-uploader>
        <div class="progress progress-striped active hide">
          <div class="bar"></div>
        </div>
        <div class="uploaded-image hide"></div>
      </div>
    </div>