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
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.