How to upload an image from custom portal widget and show that image in the ticket created?

[manmathpanda]

Dear Developers,

I am new to Service Portal and working on a custom portal widget where no record producer created instead all code are written in html for all fields of the form. like below

I have simply created 

<div class="row">
<label>Select a file: <input type="file" name="myFile"><br><br>

</div>

As i don't have idea how to create this, some code will helpful to me to achieve this?

Please help.

i want to create an attachment to upload passport images or files in the form and after submitting the form it should show in ticket as well.

Regards,

Manmath

[Akhil Kumar1]

Please use the OOB attachment widget. for more details click on the below URL.

https://community.servicenow.com/community?id=community_question&sys_id=137e937e1ba0c098ada243f6fe4b...

You can use OOB Directive also

<sp-attachment-button>

https://community.servicenow.com/community?id=community_question&sys_id=68e4832ddbd8dbc01dcaf3231f96...

[manmathpanda]

Hi Akhil,

In html i wrote as below

<div class="att-group">
File: <input type="file" id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)"/>
<br/> <div ng-show="files.length">
<div ng-repeat="file in files.slice(0)">
<span>{{file.webkitRelativePath || file.name}}</span>
(<span ng-switch="file.size > 1024*1024">
<span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>
<span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>
</span>)<span class="glyphicon glyphicon-remove-circle" id="removeicon" ng-click="removeFiles(file)"></span>
<div ng-if="data.upLoadAtt" ng-init="uploadFiles()">
</div>
</div>
</div>
</div>

but in client script and sever script what i will write to achieve this?

Please suggest.

Regards,

manmath

[Omkar Mone]

Hi 

Sorry for putting this up a bit late- 

Please find the below code which will attach your files in the backend (you can check the sys_attachment table).

HTML -

<div>
Select File : <sp-attachment-button></sp-attachment-button>
</div>

Client Script - 

function($scope, $http, spScUtil, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce, i18n, $timeout, $log, spAriaUtil, $document, spModal) {
  /* widget controller */
  var c = this;
	
	
	$scope.stickyHeaderTop = '0px';
		$scope.$on('dialog.upload_too_large.show', function(e){
		$log.error($scope.m.largeAttachmentMsg);
		spUtil.addErrorMessage($scope.m.largeAttachmentMsg);
	});
	
	$scope.m = $scope.data.msgs;
	var ah = $scope.attachmentHandler = new nowAttachmentHandler(setAttachments, appendError);
	function appendError(error) {
		spUtil.addErrorMessage(error.msg + error.fileName);
	}
	ah.setParams($scope.data._attachmentTable, $scope.data.recordID, 1024 * 1024 * $scope.data.maxAttachmentSize);
	function setAttachments(attachments, action) {
		$scope.attachments = attachments;
		if (action === "added")
			{
				console.log("added");
				c.server.update();
			}
			
		if (action === "renamed"){
			console.log("remaned");
			spAriaUtil.sendLiveMessage($scope.m.renameSuccessMsg);
			c.server.update();
		}
		if (action === "deleted"){
			console.log("deleted");
			spAriaUtil.sendLiveMessage($scope.m.deleteSuccessMsg);
			c.server.update();
		}
	}
	$scope.attachmentHandler.getAttachmentList();

	$scope.confirmDeleteAttachment = function(attachment, $event) {
    $rootScope.$broadcast("dialog.delete_attachment.show", {
      parms: {
        ok: function() {
          $scope.attachmentHandler.deleteAttachment(attachment);
          $rootScope.$broadcast("dialog.delete_attachment.close");
        },
        cancel: function() {
          $rootScope.$broadcast("dialog.delete_attachment.close");
        },
        details: attachment.name
      }
    })
  }
	
	$timeout(function() {
        if ($document[0].getElementsByClassName('sc-sticky-item-header').length > 0) {
            var titleHeight = $document[0].getElementsByClassName('sc-sticky-item-header')[0].clientHeight;
            $scope.stickyHeaderTop = '-' + (titleHeight - 20 - $document[0].getElementsByClassName('sc-cat-item-short-description')[0].clientHeight) + 'px;';
        }
    });
	
	$scope.$on('sp_loading_indicator', function(e, value) {
   $scope.loadingIndicator = value;
   });
	
	
	
	
}

Server Script - 

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

	data._attachmentTable = "sc_req_item";//here put your table
	data.recordID = "46d91e8bdb800010feeb47823996190d";// this sys_id is of my instance, put your record or req sys_id so that it will be seen in REQ as well
	
	
})();

Hope this helps.

Regards,

Omkar Mone

[mballinger]

@Omkar Mukesh Mone - I want to do something similar, but instead of uploading the file to a table, I want the file to trigger a transform map