How can i save a file like attachment in UI Page?

[EvilRojo]

How can i save a variable file type like attachment, i have my code

HTML

<input id="attachment" name="attachment" mandatory="true" type="file"/>
<g:dialog_buttons_ok_cancel ok_text="Actualizar" cancel_text="Cancelar" ok="updateCom();return true" cancel="closeWindow();"/>

 Client script

function updateCom() {
    gel('table_sys_id').value = 'sys_id_text';
    gel('fileName').value = 'NameofDocument.xlsx';
    GlideDialogWindow.get().destroy();
}
function closeWindow() {
    GlideDialogWindow.get().destroy();
}

Processing script

var attachmentSysid = '';
var gr = new GlideRecord('my_table');
gr.addEncodedQuery('query');
gr.query();
if (gr.next()) {
    var grAttachment = new GlideSysAttachment();
    attachmentSysid = grAttachment.write(gr, fileName, 'application/xlsx', attachment);
}

this code works, but the problem is that the variable 'attachment' just gave me the title of the original document(for example: documentTest.xlsx), I need the excel the i have in the file variable

[ChrisBurks]

Hi @EvilRojo ,

The file itself needs to be extracted from the element's attributes. Then the file data would need to be passed to the server via the processing server or possibly using a client callable script include. Or the Attachment API can be used as well. But the first step is to extract the file.

One way is to use JavaScript File() API.

For example in the html markup place an onchange attribute calling a function to get the file data:

<input id="attachment" name="attachment" mandatory="true" type="file" onchange="getFile(this)"/>

In the client script create the function that will capture the file data

...

function getFile(el) {
    var upload = el;
    //if only one file use the index to get to name of the file
    var filename = upload.files[0].name;
	
    //get content-type
    var contentType = upload.files[0].type;
	
    //Use FileReader API
    var fileR = new FileReader();
	
   //add listener on file reader for the load of the file content
   fileR.onload = function(e) {
        //get file content
        var content = e.target.result;
	
        //logging to the browser console to show the content retrieved. Not needed. It's just for testing
        console.log( "Here's the content: ", "\n", content)

        //execute when loaded extracting file as binary data. Note: It can also be captured as base64 data
	fileR.readAsBinaryString(upload.files[0]);
	
   };
}

...

From here you'll need to decide how you want to pass the content to the server.

If you know your file size won't be too large then you could pass the content to a hidden textarea with appropriate id and name attributes and then use that in the server processing script

Hope that helps.

References:

File attribute on input - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

FileReader  - https://developer.mozilla.org/en-US/docs/Web/API/FileReader

[-O-]

In order to upload stuff as attachment one needs to submit a form that has attribute action set to sys_attachment.do, attribute method set to post, attributes id and name set to sys_attachment.

The OOB file upload form is defined like this:

<form action="sys_attachment.do?sysparm_record_scope=global" enctype="multipart/form-data" id="sys_attachment" method="post" name="sys_attachment" onsubmit="return validateAttachment();" style="display: block; visibility: hidden;" target="upload_target">
	<!-- other needed elements -->
</form>

That form needs to have several inputs that on one hand make file selection possible on the other hand tell SN where to attach the uploaded file.

The OOB file upload form contains these elements that tell it where to upload the file (attachment):

<input id="sysparm_encryption_context" name="sysparm_encryption_context" type="hidden" value="" />
<input name="file_types" type="hidden" value="" />
<input name="max_size" type="hidden" value="1024" />
<input id="sysparm_ck" name="sysparm_ck" type="hidden" value="< you need to either set this to the value of g_ck client side, or get the same value server side using gs.getSessionToken()>" />
<input name="sysparm_nostack" type="hidden" value="yes" />
<input name="sysparm_redirect" type="hidden" value="attachment_uploaded.do?sysparm_domain_restore=false&amp;sysparm_nostack=yes" />
<input name="sysparm_sys_id" type="hidden" value="<the sys_id of the record to which the file is to be attached>" />
<input name="sysparm_table" type="hidden" value="<the sys_class_name of the table to which the file is to be attached" />

The OOB file upload form contains these elements that allow indicating the file to upload and trigger the actual upload:

<input aria-hidden="true" id="attachFile" multiple="true" name="attachFile" size="41" style="width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;" tabindex="-1" type="file" />
<input class="btn btn-primary" id="loadFileXml" onclick="document.getElementById('attachFile').click();" title="Attach" type="button" value="Choose file" />
<input class="attachfile-attach button" disabled="true" id="attachButton" style="display: none;" type="submit" value="Attach" />

The input with id attachFile also executes these on change:

checkAndSetAttachButton();
setDeleteButton(this.value);
$('attachButton').click();
trackUxMetrics(event);

But these need further JavaScript to be extracted from regular forms' source.

So in order for uploads to work, you would need to implement all that.

Luckily you can also just use the OOB UI Page called... wait for it... attachment!

Which pretty much does what has been described above.

So you can either take the code from the existing UI Page, or you can use it - it has been designed to be loaded into dialogs.

The idea is that ultimately the only way to upload stuff (e.g. attachment files) to a web server (e.g. SN) is by using a form (element) and an input (element) within that has type "file".

[VG3]

Hello @ChrisBurks ,

I used save attachment (table name,sysid) in my UI Page client script to get attachment window, but it is working it doesn't open any window.

In my UI Page ,

HTML : I used <a> tag to provide the click here to attachment link...with one function name.

Client script:

function Name(){

 Var gwd = new glideDialogWindow().get();

Var id =gwd.getPreference ("sysparam_taskid");

saveAttachment(tablename, id);

}

But when click on link button , nothing will happeing.

saveAttachment () work in workspace or not?

Please let me know if anything I am missing here ?

My main theme to upload excel to target table when click on UI action in workspace with help of UI Page.

Provide any other suggestions?

Thanks in Advance!

[-O-]

> saveAttachment () work in workspace or not?

No, it will not.

Generally speaking most of the stuff, like 99.99%, that used to work in UI16 will not work in workspaces (except for official APIs, like g_form, of course).

You need to find Workspace specific functionality to re-implement the original solution.
Though in workspaces usually there is a side panel to handle attachments.

Isn't that good enough?