Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

How to upload file from Portal page widget ?

Snehal13
Kilo Sage

Any OOB widget that can be cloned ?

 

I have upload option to upload file that must go into attachment table. how to do so in service portal page widget.

8 REPLIES 8

Sohail Khilji
Kilo Patron

HI @Snehal13 ,

 

Use the attachment widget to attach items to records. You can use this base system widget as-is in your portal or clone it to suit your own business needs.

 

SohailKhilji_2-1707723701128.png

 

 


☑️ Please mark responses as HELPFUL or ACCEPT SOLUTION to assist future users in finding the right solution....

LinkedIn - Lets Connect

@Sohail Khilji , 

Here is my use case

From Portal widget, I have file upload option and button to upload the file. Upon click of this button, it must create attachment file new record in attachment table.

 

How to do this ? I am unable to upload file to attachment table.

 

HTML

  <div>
<br>  File: <input type="file" id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)">
<br>	   
  
<input type="button" ng-click="uploadFiles()" value="Upload"></div>

Server script

(function() {
data.response = '';
	
		var gr = new GlideRecord('sys_attachment'); //input.table
		gr.insert();
		//how to upload file during insert
	

})();

Client controller

api.controller=function($scope) {
var c = this;
// CODE FOR sn-record-picker
  $scope.tableName = {
    name: 'sys_attachment'
  };		
  $scope.$on("field.change", function(evt, parms) {
    if (parms.field.name == 'tableName'){
			c.data.table = parms.newValue.toString();
			c.server.update();
		}
	});

// CODE FOR input	record
  $scope.getID = function(rec) {
		c.data.record = rec.toString();
    c.server.update();
  };
	
// CODE FOR fileupload	
	/*$scope.files = [];	
	$scope.setFiles = function(element) {
		$scope.$apply(function() {
			
			// Turn the FileList object into an Array
			for (var i = 0; i < element.files.length; i++) {
				$scope.files.push(element.files[i]);
			}
		});
	};
	
	$scope.removeFiles = function(fname) {
		var index = $scope.files.indexOf(fname);
		if(index>-1)
			$scope.files.splice(index,1);
	};	*/

	$scope.uploadFiles = function() {
		alert("Trying to upload file");	
		$scope.fd = new FormData();
		$scope.files.forEach(function(file){
			$scope.fd.set('files', file);
			var request = {
				method: 'POST',
				url: 'https://dev23367.service-now.com/api/now/attachment/file?table_name='+c.data.table+'&amp;table_sys_id='+c.data.rec_sysid+'&amp;file_name='+file.name,
				data: $scope.fd.get('files'),
				headers: {
					'Content-Type': file.type,
					'Accept':'application/pdf'					
				}
			};
			

			// SEND THE FILES.
			$http(request)
				.success(function (d) {
				alert("Uploaded with success");
			})
				.error(function (err) {
				alert("Error");
			});

		});
	}
};

 

sonamsharma8789
Tera Expert

Hi Snehal13,

You can refer widget 

"CSM Standard Ticket Conversation"---Code snippet in the attachment
 This code is used to update the attachment in the Attachment table (sys_attachment). You can modify the code to insert the attachment. Please mark helpful if you get a solution with this or provide more details so that I can help in this.

 

I cloned  still the widget isnt appearing on my page. From Portal page designer, I have added the widget.

 

Also how to save the uploaded files to attachment table.