uploadFiles angularjs function, data not found during AJAX call - angularjs

Question

I am using the following angularJS function to upload images to my site,
.controller('fupController', ['$scope', '$http', function ($scope, $http) {
var formdata = new FormData();
$scope.getTheFiles = function ($files) {
$scope.imagesrc = [];
for (var i = 0; i < $files.length; i++) {
var reader = new FileReader();
reader.fileName = $files[i].name;
reader.onload = function (event) {
var image = {};
image.Name = event.target.fileName;
image.Size = (event.total / 1024).toFixed(2);
image.Src = event.target.result;
$scope.imagesrc.push(image);
$scope.$apply();
}
reader.readAsDataURL($files[i]);
}
angular.forEach($files, function (value, key) {
formdata.append(key, value);
})
}
$scope.uploadFiles = function () {
var request = {
method: 'POST',
url: 'http://localhost:61194/api/FileUpload',
//data: formdata,
//data: { gallery: $scope.galleries[$scope.index].Id },
file: File,
headers: {
'Content-Type': undefined
}
};
$http(request).success(function (d) {
alert(d);
$scope.reset();
}).error(function () {
alert("Failed");
$scope.reset();
})
}
$scope.reset = function () {
angular.forEach(
angular.element("input [type = 'file']"),
function (inputElem) {
angular.element(inputElem).val(null);
}
);
$scope.imagesrc = [];
formdata = new FormData();
}
}])
the full code of the angular html template is as below:
<section class="view">
<div class="form-group">
<div class="controls">
<button type="submit" class="btn btn-success" ng-click="goBack()">Back</button>
</div>
</div>
<div class="row">
<img class="contact-img" ng-src="{{contact.imageUrl}}">
<section>
<article>
<div class="contact-card">
<h3 class="text-center">{{contact.firstName}} {{contact.lastName}}</h3>
<h6 class="text-center">{{contact.emailAddress}}</h6>
</div>
</article>
</section>
</div>
<form class="form margin-top-small" name="contactForm">
<fieldset>
<legend>Contact</legend>
<div class="form-group">
<label class="control-label" for="first-name">Picture</label>
<div class="controls">
<!--<input type="text" class="form-control input-large" required id="Picture" placeholder="Enter image Url" onchange="angular.element(this).scope().uploadFile(this.files)" ng-model="contact.imageUrl">-->
<!--<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)" />-->
<!--<div ng-controller="fupController">
<input type="button" class="btn btn-success" ng-click="uploadFiles()" value="Upload" />
</div>-->
<div ng-controller="fupController">
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
Photos
</div>
<div class="panel-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<td>title</td>
<td>Image</td>
<td>Size</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="image in imagesrc track by $index">
<td>{{image.Name}}</td>
<td>
<img ng-src="{{image.Src}}" title="{{image.Title}}" style="width: 100px;" />
</td>
<td>{{image.Size}}</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-lg-7">
<input type="file" multipe ng-files="getTheFiles($files)" />
</div>
<div class="col-lg-5">
<input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="uploadFiles()" value="Upload" />
<input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="reset()" value="Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--<input type="file" file-model="myFile" />
<button ng-click="uploadFile()">upload me</button>
<!-- FILE UPLOAD WITH PREVIEW, NEED TO ENABLE THE JAVASCRIPT BELOW -->
<!--<input type="file" id="imagess" onchange="previewFile()" ng-model="contact.imageUrl"><br>-->
<!--FILE UPLOAD 1-->
<!--<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)" />-->
<!--FILE UPLOAD 2-->
<!--<div ng-controller="MyCtrl">
<input type="file" ngf-select="onFileSelect($files)" multiple>
</div>-->
<!--FILE UPLOAD 3-->
<!--<div ng-controller="fileuploadCtrl">
<input type="file" ng-file-select name="file" ng-file-change="upload($files)">
<div class="progress" style=" margin 0%">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': percentComplete + '%' }" style="width: 0%;">
<span ng-if="percentComplete === 100">{{items.attachment}} upload completed successfully</span>
</div>
<span ng-if="percentComplete > 0" class="fileupload">{{percentComplete}}%</span>
</div>
</div>-->
<!--FILE UPLOAD 4-->
<!--<div ng-controller="fileuploadCtrl">
<input type="file" ngf-select="upload($files)" multiple>
</div>-->
<!--FILE UPLOAD 5-->
<!--<div ng-controller="MyCtrl2">
<h4>Upload on file select</h4>
<button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
Select File
</button>
<br><br>
File:
<div style="font:smaller">
{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
<span class="progress" ng-show="f.progress >= 0">
<div style="width:{{f.progress}}%"
ng-bind="f.progress + '%'"></div>
</span>
</div>
{{errorMsg}}
</div>-->
<!--FILE UPLOAD 6-->
<!--<div ng-controller="MyCtrl2">
<input type="file" ngf-select="uploadFiles($file, $invalidFiles)" multiple>
</div>-->
<!--<img src="" height="200" alt="Image preview...">-->
<!--<input type="file" id="multi_file_upload" ng-model="contact.imageUrl"><br>
<img src="" height="200" alt="Image preview...">-->
</div>
</div>
<div class="form-group">
<label class="control-label" for="first-name">First Name</label>
<div class="controls">
<input type="text" class="form-control input-large" required id="first-name" placeholder="Enter first name" ng-model="contact.firstName">
</div>
</div>
<div class="form-group">
<label class="control-label" for="last-name">Last Name</label>
<div class="controls">
<input type="text" class="form-control input-large" required id="last-name" placeholder="Enter last name" ng-model="contact.lastName">
</div>
</div>
<div class="form-group">
<label class="control-label" for="email-address">Email</label>
<div class="controls">
<input type="text" class="form-control input-large" required ng-pattern="{{regularExpressions.emailAddress}}" id="email-address" placeholder="Enter email address" ng-model="contact.emailAddress">
</div>
</div>
<div class="form-group margin-top-small">
<div class="controls">
<!--<button type="submit" class="btn btn-lg btn-primary" ng-click="save(contact, contactForm)">Save Contact</button>-->
<button type="submit" class="btn btn-lg btn-primary" ng-click="save(contact, contactForm)">Save Contact</button>
<span class="alert alert-info" ng-show="hasSaved">
<strong>Confirmation: </strong>contact saved ! <br>
<button type="button" class="close" data-dismiss="alert">×</button>
</span>
<span class="alert alert-info" ng-show="saveError">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Failed: </strong>contact not saved ! <br>
</span>
<p>{{errortext}}</p>
</div>
</div>
</fieldset>
</form>
This is the Index page and the scripts:
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>CSS Black Book</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="src/css/app.css" rel="stylesheet" media="screen">
<link href="src/css/Flip.css" rel="stylesheet" media="screen">
</head>
<body>
<header data-ng-controller="HeaderController">
<nav class="navbar">
<a class="navbar-brand" href="#/contacts">CSS Black Book</a>
<ul class="nav navbar-nav">
<li ng-class="{active: routeIs('contacts')}">Contacts</li>
<li ng-class="{active: routeIs('about')}">About</li>
</ul>
</nav>
</header>
<div data-ng-view data-ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<!--<script src="lib/angular/ng-file-upload-shim.min.js"></script>--> <!-- for no html5 browsers support -->
<script src="../node_modules/ng-file-upload/dist/ng-file-upload-shim.min.js"></script>
<!--<script src="../../Scripts/angular.js"></script>-->
<script src="lib/angular/angular.min.js"></script>
<!--<script src="lib/angular/ng-file-upload.min.js"></script>-->
<script src="../node_modules/ng-file-upload/dist/ng-file-upload.min.js"></script>
<script src="lib/angular/angular.resource.min.js"></script>
<!--<script src="../Scripts/angular-resource.js"></script>-->
<script src="src/common/resources/contacts.js"></script>
<script src="src/common/resources/lookups.js"></script>
<script src="src/common/services/config.js"></script>
<script src="src/common/services/state.js"></script>
<script src="src/common/directives/mouse-enter-css.js"></script>
<script src="src/common/directives/mouse-leave-css.js"></script>
<script src="src/common/services/config.js"></script>
<script src="src/app/contacts/contacts.js"></script>
<script src="src/app/about/about.js"></script>
<script src="src/app/app.js"></script>
<script src="lib/respond/respond.min.js"></script>
<!--<script src="../../Scripts/angular.js"></script>-->
<!--<script src="../../site/lib/jquery/jquery.min.js"></script>-->
<!--<script src="../../site/lib/bootstrap/js/bootstrap.min.js"></script>-->
<!--<script src="../App2/file-upload.js"></script>-->
</body>
</html>
Here is the controller that gets called to do the actual upload of the image to a project folder called "Gallery":
public class FileUploadController : ApiController
{
private FileUploadDemoDbContext Context = new FileUploadDemoDbContext();
[System.Web.Http.HttpPost]
[HttpRoute("api/FileUpload")]
public IHttpActionResult Upload()
{
int uploadCount = 0;
string sPath = System.Web.Hosting.HostingEnvironment.MapPath("/Gallery/");
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
for (int i = 0; i < files.Count; i++)
{
System.Web.HttpPostedFile file = files[i];
string fileName = new FileInfo(file.FileName).Name;
if (file.ContentLength > 0)
{
//Guid id = new Guid();
Guid id = Guid.NewGuid();
string modifiedFileName = id.ToString() + "_" + fileName;
if (!File.Exists(sPath + Path.GetFileName(modifiedFileName)))
{
file.SaveAs(sPath + Path.GetFileName(modifiedFileName));
uploadCount++;
//Context.Galleries.Add(new Gallery() { Id = Convert.ToInt32(id.ToString()), FileName = "/Gallery" + modifiedFileName, Title = fileName });
Context.Galleries.Add(new Gallery() { Id = id, FileName = "/Gallery" + modifiedFileName, Title = fileName });
}
}
}
if (uploadCount > 0)
{
Context.SaveChanges();
return Ok("Uploaded Successfully");
}
return InternalServerError();
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
Context.Dispose();
}
base.Dispose(disposing);
}
}
Issue I am having is that no file is sent to the controller... I can actually see that the image is uploaded on the page though as this is the first step of the download, its sort of a preview of the image before user clicks on the Upload button. The interesting part is that if I make the call from a different html document, one with the structure below, the AJAX Post call does succeed and the file is uploaded successfully !!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="../../site/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="../../Scripts/angular.js"></script>
<script src="../../site/lib/jquery/jquery.min.js"></script>
<script src="../../site/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../App2/file-upload.js"></script>
</head>
<body ng-app="fupApp" ng-controller="fupController">
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
Photos
</div>
<div class="panel-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<td>title</td>
<td>Image</td>
<td>Size</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="image in imagesrc track by $index">
<td>{{image.Name}}</td>
<td>
<img ng-src="{{image.Src}}" title="{{image.Title}}" style="width: 100px;"/>
</td>
<td>{{image.Size}}</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-lg-7">
<input type="file" multipe ng-files="getTheFiles($files)" />
</div>
<div class="col-lg-5">
<input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="uploadFiles()" value="Upload" />
<input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="reset()" value="Cancel" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Have tried to change the way the data is sent like below with no joy...
data: formdata
data: [gallery: $scope.galleries[$scope.index].Id]
data: file
Another possible reason could be the scripts I use as they are different on both templates...
Any suggestions ?? many thanks