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

[Virendra K]

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

[Virendra K]

Its on portal. We have Change portal created and "Bulk upload" button will be displayed after the creation of the change request. 

[Ankur Bawiskar · Accepted solution]

@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

[Virendra K]

Hi @Ankur Bawiskar 

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

I want to use above mentioned HTML code in below button script.

I am calling already ng-click ="uploadCIscsv(). How I could merge/adjust with /along with that ?  

<div ng-show="!c.data.isFileSelected" class="panel-footer;" style="background-color: #ffffff; padding: 5px;">

<button id="upload_cis_csv" class="text-right btn btn-primary" style = "background-color: #3A0092"; ng-click ="uploadCIscsv()">${Upload CIs}</button>
<lable ng-show="showLoading" class="text-right">${Loading...}</lable>
</div>

[Ankur Bawiskar]

@Virendra K 

I believe I already shared a working solution and you can enhance/tweak it further based on your requirement.

Thank you for marking my response as helpful.

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

[Virendra K]

@Ankur Bawiskar  I have enhanced the code accordingly and its working as expected.

Thank you 🙂