Button to submit the PDF and create new record

[sunilsargam]

Hello team,

Good day!!

I have a scenario where in portal widget i need to create a submit button, once button is clicked, i should get the popup to add PDF. Once PDF is submitted, a record should be created in incident table with the attachment.

Thank you

Sunil Sargam

[Salmon Raj V]

Hello @sunilsargam 

Create a new Widget (Service Portal < Widget) for your requirement (e.g., PDF Incident Submitter).

If you need further assist, please revert back to me.

Regards,

Salmon Raj Valaparla,

Mob: +917659937955

[Muhammad Salar · Accepted solution]

Try this in widget
HTML:
&lt;button class="btn btn-primary" ng-click="c.uploadAndSubmit($event)"&gt;Upload &amp; Submit Incident&lt;/button&gt;
&lt;input type="file" accept=".pdf" style="display:none" id="fileToUpload" onchange="angular.element(this).scope().setAndSubmitFile(this)" /&gt;

Client Controller:

api.controller = function($scope, $http, $element) {
  var c = this;

  c.uploadAndSubmit = function($event) {
    $event.stopPropagation();
    var $el = $element.find('input[type=file]');
    $el.val(null);
    $el.click();
  };

  $scope.setAndSubmitFile = function(element) {
    if (element.files.length === 0) return;

    var file = element.files[0];

    // Step 1: Create Incident without file info
    $http.post('/api/now/table/incident', {
      short_description: 'Incident from portal widget'
    }).then(function(response) {
      var incidentSysId = response.data.result.sys_id;
      alert('Incident created: ' + response.data.result.number);

      // Step 2: Upload file as attachment
      c.uploadAttachment(file, incidentSysId);
    }, function(error) {
      alert('Error creating incident: ' + (error.data.error.message || 'Unknown error'));
    });
  };

  c.uploadAttachment = function(file, incidentSysId) {
    var fd = new FormData();
    fd.append('file', file);

    $http.post('/api/now/attachment/file?table_name=incident&table_sys_id=' + incidentSysId + '&file_name=' + encodeURIComponent(file.name),
      fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
      }).then(function(response) {
        alert('Attachment uploaded successfully!');
      }, function(error) {
        alert('Attachment upload failed: ' + (error.data.error.message || 'Unknown error'));
      });
  };
}; 

[Muhammad Salar]

Hi @sunilsargam 
Did you try above mentioned code?

[sunilsargam]

Hello @Muhammad Salar ,

Thank you, it worked. I appreciate the help.

Have a good day!!