Restricting add attachment in service portal to accept only PDF and JPG

[ManishS14752344]

Hi,

So I know there are numerous solution available so please refrain from quoting another post or pasting links.

I have a requirement where I have to make sure that only PDF and JPG files are attached on the 'Add Attachment' in my catalog item. 

It can be done using the following script

function onSubmit() {
   
	  //Check and see if there is atleast one attachment, if none, attachment is undefined
    if (this.angular.element("#sc_cat_item").scope().attachments !== undefined) {
		
		  //Get the array of objects, each attachment has it's one object with data in the array 
		  var attachArr = this.angular.element("#sc_cat_item").scope().attachments;
		
		  //If we find a PDF-file, let the user submit
		  if (attachArr.map(function (attach){return attach.ext}).indexOf('pdf') >= 0 ){
			  return true;
		  }
    }
	
	  //If there isn't any PDF attached, dont let them submit it.
		alert('You need to attach an PDF-file to be able to submit.')	
    return false;
}

This should work but the issue is, it is using DOM and ServiceNow does not promote using DOM in service portal. 

Is there a way to do this using script include?

[SP22]

Hello @ManishS14752344,

To restrict attachments on a ServiceNow Catalog Item in the Service Portal to only PDF and JPG files, use one of the following methods depending on whether you are using a standard attachment icon or a specific "Attachment" variable.

Method 1: Using the "Attachment" Variable (Easiest)

If you have added a variable of type Attachment to your catalog item, you can restrict it directly through variable attributes.

1. Open your Catalog Item.
2. Go to the Variables related list and open your Attachment variable.
3. Navigate to the Type Specifications tab.
4. In the Variable attributes field, enter: allowed_extensions=pdf;jpg.
5. Click Update.

Method 2: Using an onSubmit Client Script (For Global Attachments)

If you are using the standard paperclip icon (standard portal attachment), you must use an onSubmit Catalog Client Script to validate files before the form is submitted.

function onSubmit() {
    // List of allowed extensions
    var validExtensions = ['pdf', 'jpg', 'jpeg'];
    
    // Portal-specific attachment check
    try {
        var attachments = this.document.getElementsByClassName('get-attachment');
        for (var i = 0; i < attachments.length; i++) {
            var fileName = attachments[i].innerHTML.toLowerCase();
            var fileExt = fileName.split('.').pop().split(' ')[0]; // Extract extension

            if (validExtensions.indexOf(fileExt) === -1) {
                alert('Invalid file type: ' + fileName + '. Only PDF and JPG are allowed.');
                return false; // Stop submission
            }
        }
    } catch (e) {
        // Native UI fallback (optional)
        var count = getSCAttachmentCount();
        if (count > 0) {
            // Further GlideAjax logic needed for Native UI deep validation
        }
    }
}​

Thanks
SP

[SP22]

@ManishS14752344 ,
https://www.servicenow.com/docs/r/de-DE/servicenow-platform/service-catalog/variable-attributes.html...

[ManishS14752344]

Is it going to work for the OOTB attachment option? The one that says "Add Attachment" at the bottom of the form. 

[Ankur Bawiskar · Accepted solution]

@ManishS14752344 

No solution without DOM is available

Only approach is to use Variable of type Attachment and then add attributes in that variable

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏