How to add an attachment to a record using a file input on a UI Page (custom development).

[nick0989]

I have a form on a UI page and all I need to do is take an input field with type "file", and have the user upload a file. Simple enough.

The file then needs to be added to a record as an attachment. I have the record in the form.

I can't figure out how to add the file as an attachment, I have tried GlideSysAttachment().

var fileName = this.getParameter('sysparm_file_name'); //file name from input
var fileType = this.getParameter('sysparm_file_type'); //file type
var tableName = this.getParameter('sysparm_table_name'); //the table of the record
var task = this.getParameter('sysparm_task'); //the record

var attachment = new GlideSysAttachment();

var rec = new GlideRecord(tableName);
rec.get(task);
var file = fileName;
var contentType = fileType;
var content = ""; //I am unsure if I can put anything here?
var agr = attachment.write(rec, file, contentType, content);
return agr;

I am unsure as to if this will work with file types.

I have tried the api/now/attachment/file end point to POST.

/api/now/attachment/file?table_name=" + tableName + "&table_sys_id=" + task + "&file_name=" + fileName

But this doesn't seem to work either.

I have to use a input element with type file in the UI page.

[ChrisBurks]

One issue could be the type of file. Check to see if there are any restrictions set in your instance that do not allow certain file type/extensions.

I did a slightly different approach but in concept it's still the same. Iterating through and sending each file one at a time should work.

//Client Script
//create an event listener on change
upFile.addEventListener('change', attachFiles, false);

function attachFiles(evt) {
    //get the name of the first File object 
    var files = Array.from(evt.target.files);
	
	//iterate thru all files uploaded
	files.forEach(function(file){
		var url = "/api/now/attachment/file?file_name=" + file.name + "&table_name=incident&table_sys_id=" + inc.value;
		var sys_id = inc.value;
		sendFiles(url,file);
	
		
	});
	
	function sendFiles(url,file){
			var oReq = new XMLHttpRequest();
            oReq.open("POST", url, true);
            oReq.onload = function(oEvent) {
                // If you reach here it is successfully Uploaded.
				
                //just printing out to my html view the details. stuff between here is not needed. 
				//it's just for my example
                var span = document.createElement('span');
				span.style.display = 'block';
                span.innerText = "File " + file.name + " uploaded successfully to ";
                var anchor = document.createElement('a');
                anchor.href = '/incident.do?sys_id=' + inc.value;
                anchor.innerText = gel("ac.status").innerText.split(" ")[0];
                span.appendChild(anchor);
                fdata.appendChild(span);
				//end of not really needed.
            };

            //send the request passing in the one file object
            oReq.send(file);
	}

}

Working example:

[msd93]

Hello Chris,

I have a requirement to allow user upload documents through UI Page.

HTML:

<input type="file" id="file"></input>

Client:

file.addEventListener('change', attachFiles, false);

function attachFiles(evt) {
//get the name of the first File object
var files = Array.from(evt.target.files);

//iterate thru all files uploaded
files.forEach(function(file){
var url = "/api/now/attachment/file?file_name=" + file.name + "&table_name=x_dat16_rt_preliminary_cost_calculation&table_sys_id=41e2d768976929102be3f9300153afad";

sendFiles(url,file);


});

function sendFiles(url,file){
var oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function(oEvent) {
// If you reach here it is successfully Uploaded.
alert(url);
//just printing out to my html view the details. stuff between here is not needed.
//it's just for my example
var span = document.createElement('span');
span.style.display = 'block';
span.innerText = "File " + file.name + " uploaded successfully to ";
var anchor = document.createElement('a');
anchor.href = '/x_dat16_rt_preliminary_cost_calculation.do?sys_id=41e2d768976929102be3f9300153afad';
// anchor.innerText = gel("ac.status").innerText.split(" ")[0];
span.appendChild(anchor);
fdata.appendChild(span);
//end of not really needed.
};

//send the request passing in the one file object
oReq.send(file);
}

}

The alert (i.e. below comments "If you reach here it is successfully Uploaded.") shows the correct URL but there is no document uploaded in attachments table. Please help me achieve this.

[ChrisBurks]

Hi @msd93 

At a quick glance it appears that you have everything correctly setup. I apologize but I didn't see this Friday when you posted else I would have looked over it through the weekend. Let me get through my scheduled work stuff today and I'll take a deeper look a bit later on.

I apologize for the inconvenience.

[msd93]

Thank you for responding @ChrisBurks 

I will wait for your inputs

[ChrisBurks]

@msd93 

A couple things that I see:

1) From what you posted the line with fdata.appendChild(span) is going to cause an error because you don't have an element with an id of fdata (nor defined a variable called fdata with an element as value)

2) Other than that the code works fine as is . The only changes I made was a different table name and sys_id as your table and sys_id doesn't exist in my instance. Thus there could be a security issue either on your table for adding attachments or extra security with adding attachments in your instance in general.