How to check csv column header name in client controller script of the widget?

Virendra K · 3 weeks ago

Hi All,

I have requirement to check the attached csv file's 1st column header using client controller script in the widget.

I am trying to use below code and changed the name of the header name of the csv file but its not working.

$scope.header = angular.element('#header').val();

if ($scope.header != 'CI Name' ) {

alert('VIR ci name passed ');

$scope.title ="Invalid file format: ";

$scope.message = "Ensure the 'CI Name' column is the first column in the file.";

return false;

}

I am not an expert in portal (html/angular script). Please help me to achieve this.

Thanks in advance.

Regards,

Virendra

Ankur Bawiskar · 3 weeks ago

@Virendra K

this is a sample working code for your validation

I am checking if first column is Name

you can enhance it further based on your requirement.

HTML:

<label for="csvUpload">Upload CSV file:</label>
<input type="file" id="csvUpload" accept=".csv" onchange="angular.element(this).scope().validateCSV(event)" />

<div ng-if="error" style="color: red; margin-top: 10px;">
  {{ error }}
</div>

Client Controller:

function($scope) {
  $scope.error = "";

  $scope.validateCSV = function(event) {
    let file = event.target.files[0];
    $scope.error = "";

    if (!file) return;

    let reader = new FileReader();

    reader.onload = function(e) {
      let contents = e.target.result;
      let lines = contents.split(/\r\n|\n/);

      if (lines.length === 0) {
        $scope.$apply(() => $scope.error = "CSV file is empty.");
        return;
      }

      // Get first line (header)
      let headers = lines[0].split(',');

      if (headers[0].trim() !== "Name") {
        $scope.$apply(() => $scope.error = "First column header must be 'Name'.");
        return;
      }

      $scope.$apply(() => $scope.error = "CSV file is valid.");
    };

    reader.readAsText(file);
  };
}

Server:

(function() {
  data.error = "";

  // Server script doesn't need to process file here, validation done client-side
})();

Output:

I hope you will mark my response as correct as I shared a working solution which you can enhance further based on your developer skills and customer requirements

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

View solution in original post

lauri457 · 3 weeks ago

Not sure what you are trying to do exactly but you can read the csv from the attachment api using the $http service. Wrap the raw binary data into a blob and you can then read it like any string with the Blob.text() method.

Another option is to use the widgets server script using the server object in the controller and GlideSysAttachment and the getContentStream method to read the attachment server-side and return the result back to the controller. However if you want to edit the csv I don't think that is possible but you can always create a copy with your modifications.

Example to read csv in browser

html template:

<div>
     <button id="attachbutton" class="btn btn-primary" ng-click="checkHeaders()">${attacmhent}</button>
     <div>{{text}}</div>
</div>

client controller:

api.controller = function ($scope, $http) {
    $scope.text = "correct value";
    $scope.checkHeaders = () => {
        const sysId = 'd5e435a783ddb210557ff0d6feaad3ff';  // attachment sysid hardcoded here
        const url = "/api/now/attachment/" + sysId + "/file";
        $http({
            method: "GET",
            url: url,
            responseType: "arraybuffer",
            headers: {
                "Accept": "application/octet-stream",
                "X-UserToken": window.g_ck
            }
        }).then(function (response) {
            const blob = new Blob([response.data], { type: "text/csv" });

            blob.text().then(function (text) {
                const firstRow = text.split(/\r?\n/)[0];
                const columns = firstRow.split(",");
                if (columns[0] != "1") {
                    $scope.text = "incorrect value";
                } else {
                    $scope.text = "correct value";
                }
            });
        }, function (error) {
            console.error("Error fetching attachment:", error);
        });
    };
};

Ankur Bawiskar · 3 weeks ago

@Virendra K

what's your actual business requirement here?

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Virendra K · 3 weeks ago

Hi @Ankur Bawiskar

Per requirement, I need to attached csv file to the modal. Once I hit the "Upload" button then code will validate the csv file checking the 1st column which should be as "CI Name", if 1st column is not there or different one then it will show an error with message.

Ankur Bawiskar · 3 weeks ago

@Virendra K

where are you planning to use this widget?

is this for catalog item?

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

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader