I have an angular app and I want to upload a file using web api deployed on different server.
Actually I prepared a sample having the html on web api and i was successful uploading the file their, but as soon as i try to upload it from my angular app to different server (cross origin than it fails), I have implemented cross origin support too.
Note: I am making an ajax call fro file upload.
<html data-ng-app="MyApp">
<head>
<link rel="stylesheet" href="Styles/bootstrap.min.css">
<title>Index</title>
<script src="Scripts/angular-cookies.js" type="text/javascript"></script>
<script src="Scripts/angular-route.min.js" type="text/javascript"></script>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
debugger;
$(document).ready(function () {
$("#button1").click(function (evt) {
var files = $("#file1").get(0).files;
if (files.length > 0) {
var data = new FormData();
for (i = 0; i < files.length; i++) {
data.append("file" + i, files[i]);
}
$.ajax({
type: "POST",
url: "http://localhost/WebApi/api/Fileupload/Post",
contentType: false,
crossorigin: true,
processData: false,
data: data,
success: function (messages) {
for (i = 0; i < messages.length; i++) {
alert(messages[i]);
}
},
error: function () {
alert("Error while invoking the Web API");
}
});
}
});
});
</script>
</head>
<body>
<!-- form name and controller declare -->
<form>
<span>Select file(s) to upload :</span>
<input id="file1" name="file1" type="file" multiple="multiple" />
<input id="button1" type="button" value="Upload" />
</form>
</body>
</html>
