Skip to content

Commit 533989c

Browse files
rafzkrafzk
committed
Upload file widget
This widget is using the 'Attachment API - POST /now/attachment/file' to upload multiple files on form submit. The result will appear in the console or check directly the record.
1 parent 886e223 commit 533989c

File tree

5 files changed

+99
-137
lines changed

5 files changed

+99
-137
lines changed

‎Service Portal Widgets/Upload Files/body.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div>
2+
<br /> Table Name: <sn-record-picker table="'sys_db_object'" display-field="'label'" value-field="'name'"
3+
field="tableName" search-fields="'label'" default-query="''" required></sn-record-picker>
4+
<br /> Record Number (eg: INC0000055): <input type='text' ng-model='record' ng-change='getID(record)' required />
5+
<br /><br /> File: <input type="file" id="fileToUpload" multiple
6+
onchange="angular.element(this).scope().setFiles(this)" />
7+
<br />
8+
<div ng-show="files.length">
9+
<div ng-repeat="file in files.slice(0)">
10+
<span>{{file.webkitRelativePath || file.name}}</span>
11+
(<span ng-switch="file.size > 1024*1024">
12+
<span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>
13+
<span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>
14+
</span>)<span class="glyphicon glyphicon-remove-circle" id="removeicon" ng-click="removeFiles(file)"></span>
15+
</div>
16+
<input type="button" ng-click="uploadFiles()" value="Upload" />
17+
</div>
18+
</div>

‎Service Portal Widgets/Upload Files/client.js‎

Lines changed: 62 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,67 @@
1-
function($uibModal, $scope, spUtil) {
1+
function($scope, $http) {
22
var c = this;
3+
// CODE FOR sn-record-picker
4+
$scope.tableName = {
5+
name: 'tableName'
6+
};
7+
$scope.$on("field.change", function(evt, parms) {
8+
if (parms.field.name == 'tableName'){
9+
c.data.table = parms.newValue.toString();
10+
c.server.update();
11+
}
12+
});
313

4-
$scope.uploadFiles = function() {
5-
$scope.fd = new FormData();
6-
$scope.files.forEach(function(file){
7-
$scope.fd.set('files', file);
8-
var request = {
9-
method: 'POST',
10-
url: 'https://<instance-name-here>.service-now.com/api/now/attachment/file?table_name='+c.data.table+'&table_sys_id='+c.data.rec_sysid+'&file_name='+file.name,
11-
data: $scope.fd.get('files'),
12-
headers: {
13-
'Content-Type': file.type,
14-
'Accept':'application/json'
15-
}
16-
};
17-
console.log('HTTP request:',request);
14+
// CODE FOR input record
15+
$scope.getID = function(rec) {
16+
c.data.record = rec.toString();
17+
c.server.update();
18+
}
1819

19-
// SEND THE FILES.
20-
$http(request)
21-
.success(function (d) {
22-
// On success code here
23-
})
24-
.error(function (err) {
25-
// On error code here
26-
});
20+
// CODE FOR fileupload
21+
$scope.files = [];
22+
$scope.setFiles = function(element) {
23+
$scope.$apply(function() {
24+
console.log('files:', element.files);
25+
// Turn the FileList object into an Array
26+
for (var i = 0; i < element.files.length; i++) {
27+
$scope.files.push(element.files[i]);
28+
}
29+
});
30+
};
2731

28-
});
29-
}
30-
}
32+
$scope.removeFiles = function(fname) {
33+
var index = $scope.files.indexOf(fname);
34+
if(index>-1)
35+
$scope.files.splice(index,1);
36+
};
3137

38+
$scope.uploadFiles = function() {
39+
$scope.fd = new FormData();
40+
$scope.files.forEach(function(file){
41+
$scope.fd.set('files', file);
42+
var request = {
43+
method: 'POST',
44+
url: '/api/now/attachment/file?table_name='+c.data.table+'&table_sys_id='+c.data.rec_sysid+'&file_name='+file.name,
45+
data: $scope.fd.get('files'),
46+
headers: {
47+
'Content-Type': file.type,
48+
'Accept':'application/json'
49+
}
50+
};
51+
//console.log('HTTP request:',request);
52+
53+
// SEND THE FILES.
54+
$http(request).then(function successCallback(response) {
55+
// this callback will be called asynchronously
56+
// when the response is available
57+
console.log("File was uploaded successfully!")
58+
}, function errorCallback(response) {
59+
// called asynchronously if an error occurs
60+
// or server returns response with an error status.
61+
console.log("Uploaded failed!")
62+
});
63+
64+
});
65+
}
66+
67+
}

‎Service Portal Widgets/Upload Files/readme.md‎

Lines changed: 2 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,5 @@
1-
# Service Portal Widget - Button "Add attachments"
1+
# Service Portal Widget - "Add attachments" form
22

33
This widget is using the 'Attachment API - POST /now/attachment/file' to upload multiple files on form submit.
44

5-
## Demo
6-
For demo, update the instance name on the api call statement.
7-
8-
## Body
9-
<div>
10-
<br/> Table Name: <sn-record-picker table="'sys_db_object'" display-field="'label'" value-field="'name'" field="tableName" search-fields="'label'" default-query="''" required></sn-record-picker>
11-
<br/> Record Number (eg: INC0000055): <input type='text' ng-model='record' ng-change='getID(record)' required/>
12-
<br/><br/> File: <input type="file" id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)"/>
13-
<br/> <div ng-show="files.length">
14-
<div ng-repeat="file in files.slice(0)">
15-
<span>{{file.webkitRelativePath || file.name}}</span>
16-
(<span ng-switch="file.size > 1024*1024">
17-
<span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>
18-
<span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>
19-
</span>)<span class="glyphicon glyphicon-remove-circle" id="removeicon" ng-click="removeFiles(file)"></span>
20-
</div>
21-
<input type="button" ng-click="uploadFiles()" value="Upload" />
22-
</div>
23-
</div>
24-
25-
## Controler As (css)
26-
27-
#removeicon:hover{
28-
cursor:pointer;
29-
cursor:hand;
30-
}
31-
32-
## Client script
33-
function($scope, $http) {
34-
var c = this;
35-
// CODE FOR sn-record-picker
36-
$scope.tableName = {
37-
name: 'tableName'
38-
};
39-
$scope.$on("field.change", function(evt, parms) {
40-
if (parms.field.name == 'tableName'){
41-
c.data.table = parms.newValue.toString();
42-
c.server.update();
43-
}
44-
});
45-
46-
// CODE FOR input record
47-
$scope.getID = function(rec) {
48-
c.data.record = rec.toString();
49-
c.server.update();
50-
}
51-
52-
// CODE FOR fileupload
53-
$scope.files = [];
54-
$scope.setFiles = function(element) {
55-
$scope.$apply(function() {
56-
console.log('files:', element.files);
57-
// Turn the FileList object into an Array
58-
for (var i = 0; i < element.files.length; i++) {
59-
$scope.files.push(element.files[i]);
60-
}
61-
});
62-
};
63-
64-
$scope.removeFiles = function(fname) {
65-
var index = $scope.files.indexOf(fname);
66-
if(index>-1)
67-
$scope.files.splice(index,1);
68-
};
69-
70-
$scope.uploadFiles = function() {
71-
$scope.fd = new FormData();
72-
$scope.files.forEach(function(file){
73-
$scope.fd.set('files', file);
74-
var request = {
75-
method: 'POST',
76-
url: 'https://<instance-name-here>.service-now.com/api/now/attachment/file?table_name='+c.data.table+'&table_sys_id='+c.data.rec_sysid+'&file_name='+file.name,
77-
data: $scope.fd.get('files'),
78-
headers: {
79-
'Content-Type': file.type,
80-
'Accept':'application/json'
81-
}
82-
};
83-
console.log('HTTP request:',request);
84-
85-
// SEND THE FILES.
86-
$http(request)
87-
.success(function (d) {
88-
// On success code here
89-
})
90-
.error(function (err) {
91-
// On error code here
92-
});
93-
94-
});
95-
}
96-
97-
}
98-
99-
## Server side
100-
101-
(function() {
102-
data.response = '';
103-
if(input.record){
104-
var gr = new GlideRecord(input.table);
105-
gr.addQuery('number',input.record);
106-
gr.query();
107-
if(gr.next()){
108-
data.rec_sysid = gr.sys_id.toString();
109-
data.response = 'success';
110-
}
111-
}
112-
113-
})();
114-
5+
The result will appear in the console or check directly the record.

‎Service Portal Widgets/Upload Files/server.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
(function() {
2+
data.response = '';
3+
if(input.record){
4+
var gr = new GlideRecord(input.table);
5+
gr.addQuery('number',input.record);
6+
gr.query();
7+
if(gr.next()){
8+
data.rec_sysid = gr.sys_id.toString();
9+
data.response = 'success';
10+
}
11+
}
12+
13+
})();

‎Service Portal Widgets/Upload Files/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#removeicon:hover{
2+
cursor:pointer;
3+
cursor:hand;
4+
}

0 commit comments

Comments
 (0)