Angular spreadsheet upload button not responding - angularjs

Question

My application uses the Angular file upload component.
https://github.com/danialfarid/angular-file-upload
It previously worked but I seem to have broken it during refactoring, and am not sure how to fix it.
The application allows for selection of the spreadsheet, but when the Import button is pressed it just highlights but does not do anything. The onFileSelect function executes, but the submitUpload is never called. There is nothing in the debugger or console.
There is a partial which contain the spreadsheet upload component.
<div class="row">
<div class="col-md-8">
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</form>
</div>
</div>
The relevant code in the controller:
$scope.onFileSelect = function ($files) {
return $scope.selector.file = $files[0];
};
$scope.selector.submitUpload = function () {
console.log('submit upload2');
return $scope.upload = $upload.upload({
url: '/api/batches/spreadsheet_upload.json',
file: $scope.selector.file
}).success(function (data, status, headers, config) {
console.log(JSON.stringify(data.data[0],null,' '))
$scope.selector.tabledata.push(data.data[0]);
});
};

Answer 1

I think the problem is a result of you having your column divs splitting the form, which results in your DesignViewCtrl not being a parent of the submit input. Try the following change in your template:
<div class="row">
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</form>
</div>
This change ensures your form element is the parent of both column divs.

Answer 2

Based on the documentation for angular-file-upload you don't even need to use a <form> so it seems like the library does that part for you. Try removing the form and just use a <div> for the controller, then use a <button> instead of an <input type="button"> for the Import button.
What I suspect is happening is that the ng-submit event is not being invoked when you click on your "Input button". I've experienced weird issues similar to this when using a form in angularjs and trying to rely on the form submit behavior.
Actually I just looked at it again and I think the problem really is that you have the <form> tag split over two elements (which would not be correct). If you had that rendered within the browser without a partial then it may work but I suspect that having it within the partial like and relying on AngularJS to put it in the browser won't work reliably.
So you can try one of two things:
1) Remove the form tag completely
<div class="row" ng-controller="DesignViewCtrl">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<button class="btn btn-success" ng-click="selector.submitUpload()"> Import </button>
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</div>
2) Leave the form tag but make sure the syntax is valid:
<form name="uploadForm" reset-form="resetForm" ng-submit="selector.submitUpload()" ng-controller="DesignViewCtrl" enctype="multipart/form-data">
<div class="row">
<div class="col-md-8">
<input type="file" name="spreadsheet" ng-file-select="onFileSelect($files)" />
</div>
<div class="col-md-2">
<input type="submit" value=" Import " class="btn btn-success" />
<p ng-show="uploaded">Success! <a ng-href="/batches/{{batchID}}">Show batch</a></p>
</div>
</div>
</form>