uploaddropzonekendo-angular-ui

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


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.sstatic.net/dKuMk.png


Solution

  • 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.