Error: There is no user-defined filter with 'sender_Name' field provided through the [filters] input property.

export const  caseFilters: FilterExpression[] = [
    {
        field: 'sender_Name',
        editor: 'string',
    },
    {
      field: 'assign_To',
      title: 'Assign To',
      editor: 'string',
    },  
    {
        field: 'last_Date',
        title: 'Last Date',
        editor: 'date',
    },
    {
        field: 'case_Level',
        title: 'Level',
        editor: 'number',
    },
  
  ];

<div class="example-config">
  <p class="k-form-hint">
    Click the button below to filter the Grid from an external Filter
    component
  </p>
  <button kendoButton (click)="openFilter()" icon="filter">
    Filter the Grid
  </button>
</div>

<kendo-window *ngIf="opened" (close)="closeFilter()" [width]="620" [top]="300">
<div class="window-content">
    <kendo-filter #filter [value]="filterValue" [filters]="caseFilters">
    </kendo-filter>
    <button kendoButton (click)="applyFilter(filter.value)" style="width:100%;">Apply filter</button>
</div>
</kendo-window>

public applyFilter(value: CompositeFilterDescriptor): void {
  this.gridData = filterBy(this.orignalGridData, value);
  this.loadGrid();
  this.filterValue = value;
}

<kendo-loader type="infinite-spinner" themeColor="primary" size="medium"></kendo-loader>

<div class="flex flex-col max-w-375">
    <kendo-uploaddropzone zoneId="uploadImagesZone">
      Only JPEG and PNG files are allowed.
    </kendo-uploaddropzone>
    <kendo-upload zoneId="uploadImagesZone" [autoUpload]="false"
      [saveUrl]="this.uploadImagesURL" [removeUrl]="this.removeImageUrl"
      (remove)="onRemove($event)" (cancel)="onCancel($event)"
      (success)="onUpload($event)" [restrictions]="myRestrictions"
                  [multiple]="true"
      [showFileList]="true" responseType="text">
    </kendo-upload>
  </div>

@PostMapping("image/{name}")
public ResponseEntity<ImageDetails> compressImage(@RequestBody MultipartFile image, @PathVariable final String name) {
}

  
I can't simply disable the whole thing. I can't see to figure out how to access the pieces I need.. HELP ? 

<div>
    <kendo-upload #upload [ngModel]="files" [saveUrl]="saveUrl" [removeUrl]="removeUrl" [disabled]="false"
        (upload)="onBeforeUpload($event)" (success)="onUploaded($event)" (select)="onSelect($event)"
        (remove)="onBeforeRemove($event)" [restrictions]="restrictions">
        <ng-template kendoUploadFileInfoTemplate let-files>
            <span class="k-file-name-size-wrapper">
                <span (click)="onDownloadClick(files[0])" class="k-file-name" title="{{ files[0].name }}">{{
                    files[0].name }}</span>
                <span class="k-file-size" ng-reflect-ng-class="[object Object]">Size: {{ files[0].size | fileSize:2
                    }}</span>
            </span>
        </ng-template>
    </kendo-upload>
    <div *ngIf="errors.length > 0">
        <p style="color: red;" *ngFor="let err of errors">{{ err }}</p>
    </div>
</div>

// @ViewChild('upload', { static: false })
    //upload!: HTMLElement;
    //.k-upload-status { display: none; }
   // $(".k-upload").find(".k-delete").hide();
    errors: string[] = [];
    constructor() { }
    ngOnInit(): void {
       // (this.uc.fileSelectButton.nativeElement as HTMLElement).classList.add('k-state-disabled');
    }