-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIndex.html
123 lines (105 loc) · 4.04 KB
/
Index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
.fileUpload {
margin-top: 50px;
}
.fileInfo {
margin-right: 100px;
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
}
.errorText {
color: #f00;
margin: 20px 0px 0px 0px;
}
.errorItem {
color: #f00;
background-color: #cacaca;
}
</style>
</head>
<body ng-app="myFileUploadApp">
<div ng-controller="myFileUploadCtrl">
<div class="container">
<div class="fileUpload">
<input class="fileInfo" file-model="myFile" type="file"/>
<button class="btn-success" ng-click="uploadFile()">Convert file</button>
<button class="btn-danger" ng-click="clear()">Clear</button>
</div>
<div ng-if="generalErrors.length != 0">
<div class="errorText"> Error List :</div>
<ul class="list-group" ng-repeat="item in generalErrors">
<li class="list-group-item errorItem">{{item}}</li>
</ul>
</div>
</div>
</div>
</body>
<script>
var myApp = angular.module('myFileUploadApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.controller('myFileUploadCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.generalErrors = [];
var endpoint = "http://localhost:9085/convertFile";
$scope.uploadFile = function () {
$scope.generalErrors = [];
var file = $scope.myFile;
if (file === undefined)
$scope.generalErrors = ["File no selected"];
else {
var formData = new FormData();
formData.append('file', file);
$http.post(endpoint, formData
, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}
).then(function successCallback(response) {
$scope.downloadFile('Result.xml', response.data);
$scope.clear();
}, function errorCallback(response) {
if (response.headers('Content-type') == "text/plain") {
$scope.downloadFile('Error.csv', response.data);
$scope.clear();
} else if (response.headers('Content-type') == "application/json")
$scope.generalErrors = response.data;
else
$scope.generalErrors = ["Unsupported Content type"];
});
}
};
$scope.clear = function () {
angular.element("input[type='file']").val(null);
$scope.generalErrors = [];
$scope.myFile = undefined;
};
$scope.downloadFile = function (fileName, data) {
var url = window.URL.createObjectURL(new Blob(["\ufeff", data]));
var a = document.createElement('a');
a.href = url;
a.download = fileName;
a.click();
}
}]);
</script>
</html>