title: Jasmine Testing Angular File Upload
body: <p>I am trying to test the file upload feature in Angular, via my controller. I have logic that will check the file size, and then when the image is loaded, I want to do run additional logic. </p>
  
  <p>When I run the test case, I get the error <code>TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.</code> </p>
  
  <p>I am wondering- What is the proper way to test this?</p>
  
  <p>I am using Jasmine 2.7, Angular 1.6.5, Karma 1.7.0, and Karma Jasmine 1.1.0.</p>
  
  <p>Here is my test case:</p>
  
  <pre><code>it('should do something', function() {
  
      let event = {
          target: {
              files:{
                  0:{
                      name: "test.png",
                      size: 20000000,
                      type: "image/png"
                  }
              },
          }
      };
  
      ctrl.processFile(event);
      spyOn(window, 'Image')
      expect(ctrl.fileTooBig).toBeTruthy()
  });
  </code></pre>
  
  <p>Here is the controller code it is trying to test:</p>
  
  <pre><code>vm.fileTooBig = '';
  vm.processFile = function(event) {
      console.log("event", event)
  
      file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = function(fileEvent) {
  
          //is the file bigger than 10MB?
          if (fileEvent.total &gt; 10000000) {
               vm.fileTooBig = true;
          }
  
          var image = new Image();
  
          image.onload = function(evt) {
                 // do something
              }
  
          };
  
      };
  
      reader.readAsDataURL(file);
  };
  
  $(document).on("change", "input[type=file]", function(event) {
      vm.processFile(event);
  });
  </code></pre>