title: AngularJS file upload from ngThumb directive (with angular-file-upload)
body: <p>I am using <a href="https://github.com/nervgh/angular-file-upload">Angular-File-Upload</a> to upload file to server. Everything works fine and the file can be saved in DB.</p>
  
  <p>The question is, how can I load back the images that I saved when in edit mode?</p>
  
  <p>This is the directive to create <code>canvas</code> when upload the pic</p>
  
  <pre><code>'use strict';
  
  myApp
  
      .directive('ngThumb', ['$window', function($window) {
          var helper = {
              support: !!($window.FileReader &amp;&amp; $window.CanvasRenderingContext2D),
              isFile: function(item) {
                  return angular.isObject(item) &amp;&amp; item instanceof $window.File;
              },
              isImage: function(file) {
                  var type =  '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
                  return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
              }
          };
  
          return {
              restrict: 'A',
              template: '&lt;canvas/&gt;',
              link: function(scope, element, attributes) {
                  if (!helper.support) return;
  
                  var params = scope.$eval(attributes.ngThumb);
  
                  if (!helper.isFile(params.file)) return;
                  if (!helper.isImage(params.file)) return;
  
                  var canvas = element.find('canvas');
                  var reader = new FileReader();
  
                  reader.onload = onLoadFile;
                  reader.readAsDataURL(params.file);
  
                  function onLoadFile(event) {
                      var img = new Image();
                      img.onload = onLoadImage;
                      img.src = event.target.result;
                  }
  
                  function onLoadImage() {
                      var width = params.width || this.width / this.height * params.height;
                      var height = params.height || this.height / this.width * params.width;
                      canvas.attr({ width: width, height: height });
                      canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
                  }
              }
          };
      }]);
  </code></pre>
  
  <p>This is an html snippet that load canvas when there is an upload:</p>
  
  <pre><code>&lt;div class="table-responsive"  ng-hide="!uploaderImages.queue.length"&gt;
      &lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
              &lt;th width="50%"&gt;Name&lt;/th&gt;
              &lt;th ng-show="uploaderImages.isHTML5"&gt;Size&lt;/th&gt;
              &lt;th ng-show="uploaderImages.isHTML5"&gt;Progress&lt;/th&gt;
              &lt;th&gt;Status&lt;/th&gt;
              &lt;th&gt;Actions&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr ng-repeat="item in uploaderImages.queue"&gt;
            &lt;td&gt;&lt;strong&gt;{{ item.file.name }}&lt;/strong&gt;
              &lt;div ng-show="uploaderImages.isHTML5" ng-thumb="{ file: item._file, height: 100 }"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td ng-show="uploaderImages.isHTML5" nowrap&gt;{{ item.file.size/1024/1024|number:2 }} MB&lt;/td&gt;
          &lt;td ng-show="uploaderImages.isHTML5"&gt;
  &lt;div class="progress progress-xs margin-bottom-0"&gt;
  &lt;div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/td&gt;
  &lt;td class="text-center"&gt;
      &lt;span ng-show="item.isSuccess"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;span ng-show="item.isCancel"&gt;&lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;span ng-show="item.isError"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/td&gt;
  &lt;td nowrap&gt;
  &lt;button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"&gt;
  &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Remove
  &lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!!</p>