Implementing Attachment Picker in ServiceNow Portal

[amrfahmy]

Implementing Attachment Picker in ServiceNow Portal

Description: This article explains how to implement an attachment picker in a ServiceNow portal, allowing users to select files and upload them only when the Submit button is clicked. The logic ensures that attachments are handled and uploaded to the appropriate table and record in a controlled manner.

Steps to Implement:

1. Set Up the Attachment Picker: Add the following HTML code to your portal widget to include an attachment picker and a Submit button.

<sp-attachment-picker 
    on-file-pick="attachFile($files)" 
    attachment-handler="attachmentHandler">
</sp-attachment-picker>

<button ng-click="submitButton()">${Submit}</button>
        

1. Configure the AngularJS Controller: Use the following code in the widget's client script.

(function($scope, nowAttachmentHandler) {
    // Initialize the attachment handler
    $scope.attachmentHandler = new nowAttachmentHandler();
    $scope.attachmentHandler.setParams($scope.data.table, $scope.data.sys_id, 1024 * 1024 * $scope.data.maxAttachmentSize);

    var attachFiles = '';

    // Bind file picker
    $scope.attachFile = function(files) {
        attachFiles = files;
    };

    // Submit button logic
    $scope.submitButton = function() {
        // Add custom logic if needed
        spAttachmentUpload.uploadAttachments($scope.attachmentHandler, attachFiles);
    };
})(angular.scope, nowAttachmentHandler);
        

For ServiceNow Instance Standard and Workspace view :

https://www.servicenow.com/community/developer-forum/adding-attachments-in-a-pop-up-modal-and-saving...

If you have any questions or suggestions, feel free to share your feedback!

[Fahd Zayed]

Great article, thank you.

[BaselT]

Great article thank's