Need help to fetch attachments and pass them to a notification through UI Page

JérômeM · ‎06-26-2025

Hello
I developed the following feature. I have a button "Communicate to customer" that allows user to type some text and on submit, it triggers a notification from the Case linked in the field Parent Case.
I have now the need to add attachment on that new page as well. I managed to add an attachment adding feature but I'm stuck now to pass those attachments towards the notification.

Can anyone help me ?

Here's my UI Page :

<div>
  <textarea id="customerMessage" style="width:100%; height:100px;" placeholder="Type your message to the customer..."></textarea>
  <br/><br/>
  
  <!-- Attachment upload -->
  <input type="file" id="attachment" multiple="multiple" />
  <br/><br/>

  <button class="btn btn-primary" onclick="submitCommunication()">Submit</button>
  <button class="btn btn-default" onclick="GlideDialogWindow.get().destroy()">Cancel</button>
</div>
<script>
function submitCommunication() {
  var msg = document.getElementById('customerMessage').value;
  if (!msg.trim()) {
    alert("Message cannot be empty");
    return;
  }

  var ga = new GlideAjax('ParentCaseCommunication');
  ga.addParam('sysparm_name', 'sendToParentCase');
  ga.addParam('sysparm_task_id', g_form.getUniqueValue());
  ga.addParam('sysparm_message', msg);
  ga.getXMLAnswer(function(response) {
    alert("Message sent to parent case!");
    GlideDialogWindow.get().destroy();
  });
}
</script>

And the linked Script Include :

var ParentCaseCommunication = Class.create();
ParentCaseCommunication.prototype = Object.extendsObject(AbstractAjaxProcessor, {

  sendToParentCase: function() {
    var taskId = this.getParameter('sysparm_task_id');
    var message = this.getParameter('sysparm_message');
	var caseSysId = '';

    var taskGr = new GlideRecord('task');
	taskGr.addQuery('sys_id', taskId);
	taskGr.query();
	while(taskGr.next()) {
		gs.log('>>> Communicate to customer : Retrieved incident : ' + taskGr);
		var parentCase = taskGr.u_parent_case;
		caseSysId = parentCase.toString();
		gs.log('>>> Communicate to customer : Retrieved Case ' + parentCase);
		var parentCaseUpdate = new GlideRecord('sn_customerservice_case');
		parentCaseUpdate.addQuery('sys_id', parentCase);
		parentCaseUpdate.query();
		while(parentCaseUpdate.next()) {
			parentCaseUpdate.comments = message;
			parentCaseUpdate.setWorkflow(true);
			parentCaseUpdate.update();
			gs.eventQueue('belnet.communicatetocustomer', parentCaseUpdate, message);
		}
	}
	return caseSysId;
  }
});

Thanks in advance!
Jérôme

Ankur Bawiskar · ‎06-26-2025

@JérômeM

it would be somewhat challenging.

You can look into the OOTB attachment UI page

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Ankur Bawiskar · ‎06-26-2025

@JérômeM

I was able to do this, you can enhance it further from here

UI Page: HTML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">
  <html>
    <head>
      <title>Upload File and Print Base64</title>
      <script type="text/javascript">
        window.onload = function() {
          var fileInput = document.getElementById('upFile');
          var fileName = document.getElementById('fname');
          var fileType = document.getElementById('ftype');
          var base64Output = document.getElementById('base64data');

          fileInput.addEventListener('change', function(evt) {
            var file = evt.target.files[0];
            if (!file) return;

            fileName.innerText = "File Name: " + file.name;
            fileType.innerText = "Content Type: " + file.type;

            var reader = new FileReader();
            reader.onload = function(e) {
              var base64String = e.target.result.split(',')[1];
              base64Output.innerText = "Base64 Data:\n" + base64String;
              // Optionally, you can now store this in hidden HTML element and access it in client script or processing script
            };
            reader.readAsDataURL(file);
          }, false);
        };
      </script>
    </head>
    <body>
      <form>
        <label>Upload File</label>
        <input id="upFile" type="file" />
      </form>
      <section>
        <p id="fname"></p>
        <p id="ftype"></p>
        <pre id="base64data" style="max-width: 100%; white-space: pre-wrap; word-break: break-all;"></pre>
      </section>
    </body>
  </html>
</j:jelly>

Output: I was able to select a file and print the base64 encoded data, once you get that you can use the below logic to add that file to your record

This script you can use in server side when you pass Ajax and pass the required details

var ecc = new GlideRecord('ecc_queue');
ecc.initialize();
ecc.agent = "AttachmentCreator";
ecc.topic = "AttachmentCreator";
ecc.name = "test.txt:text/plain";
ecc.source = "kb_knowledge:" + target.sys_id;
ecc.payload = 'base64Data';
ecc.insert();

I hope you can take it further from here

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Ankur Bawiskar · ‎06-26-2025

@JérômeM

Hope you are doing good.

Did my reply answer your question?

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader