<style>
 .dialog_content {
 width: 100%;
 height: 100px;
 vertical-align: middle;
 min-width: 300px;
 padding: 0 10px 10px 10px;
 }

 .dialog_buttons {
 display: inline;
 text-align: right;
 vertical-align:bottom;
 white-space: nowrap;
 }
 th, td {
    padding: 5px;
 }
</style>
<g:ui_form onsubmit="return invokePromptCallBack();">

 <table border="0" width="100%">
  <tr>
   <td>
   <label for="attFile">Select a file:</label>
   <input type="file" id="attFile" name="attFile" />
   </td>
  </tr>
  <tr>
   <td>
   <label for="work_note">Work Notes:</label>
   <input id="work_note" class="col-sm-12 form-control" type="text" name="work_note" required="true" placeholder="Work Notes"/>
   </td>
  </tr>
  <tr>
   <td class="dialog_buttons">
    <g:dialog_button 
    id="${jvar_ok_id}" 
    type="button" 
    onclick="invokePromptCallBack('ok');" 
    style="width: 10em;padding:5px;float:right">${gs.getMessage('Override Approval')}
    </g:dialog_button>
   </td>
   <td class="dialog_buttons"> 
    <g:dialog_button 
    id="${jvar_ok_id}" 
    type="button" 
    onclick="invokePromptCallBack('cancel')" 
    style="width: 5em;padding:5px;float:right">${gs.getMessage('Cancel')}
    </g:dialog_button>       
   </td>
  </tr>
 </table>
</g:ui_form>

Client Script:

function invokePromptCallBack(type) {
    var file = document.getElementById('attFile');
    if (type == 'ok' && (file.files.length == 0 || !gel('work_note').value)) {
        alert('Please provide both Attachment and Work Notes');
        return;
    }
    var gdw = new GlideDialogWindow.get();
    if (type == 'ok') {
        var f = gdw.getPreference('onPromptComplete');
        if (typeof(f) == 'function') {
            try {
                f.call(gdw, file, gel('work_note').value);
            } catch (e) {}
        }
    }
    gdw.destroy();
    return false;
}

Script Include:

Name: AttHandler
Description: Attachment handler for copying attachment from HTML input to forms and records
Client Callable: true
Script:
var AttHandler = Class.create();
AttHandler.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    attachToRITM: function() {
        var ritmID = this.getParameter('sysparm_ritm_id');
        var fileName = this.getParameter('sysparm_fileName');
        var contentType = this.getParameter('sysparm_contentType');
        var base64Encodedcontent = this.getParameter('sysparm_base64Encodedcontent');
        var workNotes = this.getParameter('sysparm_work_note');

        var ritmGR= new GlideRecord("sc_req_item");
        if (ritmGR.get(ritmID)) {
            var attachmentDocGR = new GlideSysAttachment();
            var attachmentStream = GlideStringUtil.base64DecodeAsBytes(base64Encodedcontent);
            attachmentDocGR.write(ritmGR, fileName, contentType, attachmentStream);
            ritmGR.work_notes = workNotes;
            ritmGR.update();
        }
        return '';
    },

    type: 'AttHandler'
});

Following the above steps would be able to assist you copying the attachment from UI page/Widget or any HTML input to ServiceNow Forms. You can further add the code to update the approval records and respective fields on RITM as per this use case.

Please note this configuration is not validated for Workspace as of now, will keep you posted once workspace compatible functionality will be done.

Happy Learning!

Deepak

Connect me on LinkedIn