How do I disable only the delete and the upload button in this kendo upload template ?

[Matt]

  
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');
    }
        
            
                
                

// .k-upload {

//     display: none;

// }

// .k-upload-button

// {

//     display: none;

// }

// .k-upload-files.k-reset {

//     display: none;

// }

// .k-widget.k-upload .k-action-buttons {

//     display: none;

// }

// .k-upload-button {

//     width: auto;

//     padding: 8px 25px;

//     font-size: 14px;

//     text-transform: none;

//     background: #112E51;

//     border-radius: 30px;

//     padding: 9px 20px;

//     margin: 50px 1px 15px 0px;

//     font-size: 14px;

//     color: #FFFFFF;

//     box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);

// }

[Svet]

Hi Matt,

Thank you for the provided details.

Please see the following example demonstrating how to disable the "Clear" and "Upload" buttons and the "Remove" buttons per file in the Upload component using some custom CSS (I have further added color to the CSS rules to make it easier to differentiate them):

https://stackblitz.com/edit/angular-pqnxqj?file=src%2Fapp%2Fupload.component.ts

The essential parts are the following:

  .k-upload .k-upload-selected{
    opacity: 0.5;
    pointer-events: none;
    color: blue;
  }

  .k-upload .k-clear-selected{
    opacity: 0.5;
    pointer-events: none;
    color: green;
  }

  .k-upload .k-upload-action{
    opacity: 0.5;
    pointer-events: none;
  }

I hope this helps. Please let me know if I am missing something or if I can provide any further information on this case. 

Regards,
Svet
Progress Telerik

[Matt]

I want everything disabled expect the ability to download the files.  In the example I cannot download the files

 

The X should be disabled but not the filename

[Dimiter Madjarov]

Hi Matt,

The provided example does not include the custom functionality for downloading files, which is the reason for the observed behaviour. Clicking on the file name itself is not disabled, so what is needed is to wrap the file name with the custom span element and attach the download click handler.

I hope this information helps.