kendo-angular-ui How to hide the drop zone with kendo-upload

Question

I would like to only show the Select files button and hide the drop zone around that. I believe it is called the DropZoneInternalDirective. There is no parameter ican find on the documentation https://www.telerik.com/kendo-angular-ui/components/uploads/upload/

See Image here https://i.stack.imgur.com/dKuMk.png

score 1 · Accepted Answer · answered Oct 29 '22 at 13:16

Neil,

The Kendo UI Upload for Angular does not expose a property that can hide the internal drop zone. What I can recommend as an alternative is to remove the text of the placeholder and remove the border of the component.

   @Component({
        selector: 'my-upload',
        template: `
        <kendo-upload [saveUrl]="uploadSaveUrl" [removeUrl]="uploadRemoveUrl">
            <kendo-upload-messages [dropFilesHere]="''"> </kendo-upload-messages>
        </kendo-upload>
        `,
        encapsulation: ViewEncapsulation.None,
        styles: [
          `
            .k-upload {
                border: 0;
           }
           .k-widget .k-dropzone-active {
               pointer-events: none;
           }
          `,
       ],
    })

Check out the StackBlitz snippet that showcases the styled component.

kendo-angular-ui How to hide the drop zone with kendo-upload

1 Answers1