How do you use ng-file-upload and ngImgCrop?

I want to create a file uploader that I can upload a picture to my UI, crop it and then send it to my server. I've been using ngFileUpload to upload files and it has worked well. I added ngImgCrop to my project as instructed and imported the html and css from http://jsfiddle.net/danialfarid/xxo3sk41/590/ into my project to figure out how to use it. Everything looks good at first glance but when I select a picture from my hard drive it does not appear in the crop area. Could something be hidden or is something else wrong? Here is the jsfiddle html and css:

<style>
    .cropArea {
      background: #E4E4E4;
      overflow: hidden;
      width:500px;
      height:350px;
    }
  </style>

<div>Crop Image and Upload</div>
        <button ngf-select ng-model="picFile" accept="image/*">
            Select Picture</button>
        <div ngf-drop ng-model="picFile" ngf-pattern="image/*"
             class="cropArea">
            <img-crop image="picFile  | ngfDataUrl"                 
            result-image="croppedDataUrl" ng-init="croppedDataUrl=''">
            </img-crop>
        </div>
        <div>
            <img ng-src="{{croppedDataUrl}}" />
        </div>
        <button ng-click="upload(croppedDataUrl, picFile.name)">Submit</button>

I have code that works just for uploading. The picture appears as expected. I wonder why it is for the one and not the other. This code works for ng-file-upload:

<div class="photo-upload-text">Upload your image</div>
<a class="upload-button" ngf-select ng-model="logo" href="#">Choose File&nbsp;</a>
<img ngf-src="logo" ngf-default-src="'/thumb.jpg'" ngf-accept="'image/*'">

Finally, I laid out two examples. This one allows me to crop the picture but it does not produce a base64 file without a prefix that can be easily uploaded. The second one though similar does not put the picture up for cropping.

Allows for cropping but does not produce an acceptable base64 file

<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
  <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div>
  <img ng-src="{{myCroppedImage}}" />
</div>

I think this provides a good base64 file but I can't crop it to find out

<div>Crop Image and Upload</div>
<button ngf-select ng-model="picFile" accept="image/*">Select Picture</button>
<div ngf-drop ng-model="picFile" ngf-pattern="image/*"class="cropArea">
    <img-crop image="picFile  | ngfDataUrl" result-image="croppedDataUrl" ng-init="croppedDataUrl=''"></img-crop>
</div>
<div>Cropped Image:</div>
<div>
    <img ng-src="{{croppedDataUrl}}" />
</div>

Solution

Everything looks good at first glance but when I select a picture from my hard drive it does not appear in the crop area.

Everything works perfectly when I tried reproducing your issue using your code below.

angular.module('app', ['ngFileUpload', 'ngImgCrop']).controller('UploadController', function($scope) {

});

    .cropArea {
      background: #E4E4E4;
      overflow: hidden;
      width:500px;
      height:350px;
    }

<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-img-crop/0.3.2/ng-img-crop.css" rel="stylesheet"/>
</head>

<body ng-app="app">

  <div>Crop Image and Upload</div>
<button ngf-select ng-model="picFile" accept="image/*">
  Select Picture</button>
<div ngf-drop ng-model="picFile" ngf-pattern="image/*"
     class="cropArea">
  <img-crop image="picFile  | ngfDataUrl"                 
            result-image="croppedDataUrl" ng-init="croppedDataUrl=''">
  </img-crop>
</div>
<div>
  <img ng-src="{{croppedDataUrl}}" />
</div>
<button ng-click="upload(croppedDataUrl, picFile.name)">Submit</button> 
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.0.4/ng-file-upload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-img-crop/0.3.2/ng-img-crop.js"></script>
 </body>