Kendo Upload

[Karthikeyan]

 <kendo-uploaddropzone-messages

dropFilesHere ="Max file size: 47.68 MB Only .xlsx">

 </kendo-uploaddropzone-messages>

this tag helps to customize the message hints, but it's coming as a string

we need to show the hint like this. How do we do?

[Hetali]

Hi Karthikeyan,

In order to achieve the desired DropZone, add the UploadComponent in the UploadDropZoneComponent with the following <p> tags and CSS:

<kendo-uploaddropzone zoneId="myZone">
  <p style="text-align: center">or</p>
  <kendo-upload>
    <kendo-upload-messages
      dropFilesHere=""
    >
    </kendo-upload-messages>
  </kendo-upload>
  <p style="text-align: center">
    <strong>Max file size:</strong> 
    47.68 MB Only .xlsx
  </p>
  <p style="text-align: center">
    <strong>Only:</strong> 
    JPG, JPEG, PNG, TIF, PDF, DOC, DOCX, XLS,XLSX, TXT, ZIP, CSV, EML, MSG
  </p>
</kendo-uploaddropzone>

.k-upload-button-wrap {
  left: 40%;
}
.k-upload {
  border-color: #fafafa;
}
.k-external-dropzone {
  height: 270px;
}

Output: 

I have demonstrated the above custom approach in this StackBlitz example.

Please let me know if this helps or if I can further assist you.

Regards,
Hetali
Progress Telerik