How to preview uploaded file in AngularJS

Question

I am using Angular File Upload.

http://plnkr.co/edit/qLckEIlNLEcIfvwn4Q5x?p=preview

I want to upload-preview when a file is uploaded. Can you give me any suggestion? Here is HTML code:

<div class="form-group">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
  <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i>  <span class="fileinput-filename"></span>
  </div>
  <span class="input-group-addon btn btn-default btn-file">
    <span class="fileinput-new">Select to Upload file</span>
    <input id="fileupload" file-upload="fileUploadOptions" type="file" name="attData" multiple data-sequential-uploads="true" />
  </span>
</div>

Here is my controller:

 angular.module("myapp", ["ngAnimate", "ngSanitize", "ui.bootstrap"])
  .controller("Ctrl", function($scope, $modal, $log) {

    $scope.openModal = function() {
      $log.log("opening modal");
      var modURL = "modalwindow.html";
      var theModal = $modal.open({
        scope: $scope,
        templateUrl: modURL,
        controller: 'detailController',
        size: 'lg'
      });
      theModal.opened.then(function() {
        $log.log("modal opened");
      });
    };
  })
  .controller('detailController', function($scope, $modalInstance) {

    $scope.fileUploadOptions = {
      notetext: "text",
      progress: 0
    };

    $scope.closeModal = function() {
      $modalInstance.close();
    };
  })
  .directive('fileUpload', function($log, $parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var options = $parse(attrs.fileUpload)(scope) || {};

        element.fileupload({
          dataType: 'json',
          url: '//jquery-file-upload.appspot.com/',
          done: function(e, data) {
            $log.log("done accessed");
          },
          fail: function(e, data) {
            $log.log("fail accessed");
          },
          progress: function(e, data) {
            options.progress = parseInt(data.loaded / data.total * 100, 10);
            scope.$apply();
            $log.log(options)
            $log.log("progress");
          },
          //add: function(e,data){
          //$log.log("add accessed");
          //},
          submit: function(e, data) {
            $log.log("notetext:", options.notetext);
            data.formData = {
              Description: options.notetext
            };
            $log.log("submit accessed");
          }
        });
      }
    }
  });

Does anyone know the coding for preview image? Thanks

Answer 1

I've adapted the solution provided in this StackOverflow question to your case, which uses a service called fileReader:

          submit: function(e, data) {
            $log.log("notetext:", options.notetext, data);
            scope.file = data.files[0]
            data.formData = {
              Description: options.notetext
            };
            fileReader.readAsDataUrl(scope.file, scope)
                          .then(function(result) {
                              scope.imageSrc = result;
                          })
            $log.log("submit accessed");
          }

Check the code changes in this Plunker.

In the image below you can see the outcome of an image upload: