Chunk Upload drag and drop not working

[Clint]

I have copied over the demo: Chunk Upload in ASP.NET Core Upload Component Demo | Telerik UI for ASP.NET Core

Web project: netcoreapp3.1

We're using Telerik.UI.for.AspNet.Core Version="2020.2.617"

So far I have not been able to get the drop zone to show up, and I am also missing the hint text of "Drop files here to upload".

I tried adding it manually:

.Messages(
   builder =>
   {
      builder.DropFilesHere("Drop files here to upload");
   }
)

[Clint]

I have now updated to 2021.3.914 to see if that would resolve anything. I updated the nuget package being targeted and two js files being used:

• kendo.all.min.js
• kendo.aspnetmvc.min.js

It still looks the same:

What is produced within dev tools:

<div class="demo-section k-content">
   <div class="k-widget k-upload k-upload-sync k-upload-empty">
      <div class="k-dropzone">
         <div class="k-button k-upload-button">
            <input id="files" name="files" type="file" data-role="upload" aria-label="Select files..." multiple="multiple" autocomplete="off">
            <span>Select files...</span>
         </div>
      </div>
   </div>
   <script>kendo.syncReady(function(){jQuery("#files").kendoUpload({"async":{"autoUpload":true,"chunkSize":11000,"saveUrl":null,"removeUrl":null},"validation":{"maxFileSize":20000000}});});</script>
</div>

One thing I've noticed when comparing my output, besides missing the hint text, is that my k-upload-sync class should be k-upload-async

Demo output for Telerik UI for ASP.NET Core

<div class="demo-section k-content">
   <div class="k-widget k-upload k-upload-async k-upload-empty">
      <div class="k-dropzone">
         <div class="k-button k-upload-button">
            <input id="files" name="files" type="file" data-role="upload" aria-label="Select files..." multiple="multiple" autocomplete="off">
            <span>Select files...</span>
         </div>
         <em class="k-dropzone-hint">Drop files here to upload</em>
      </div>
   </div>
   <script>kendo.syncReady(function(){jQuery("#files").kendoUpload({"async":{"autoUpload":true,"chunkSize":11000,"saveUrl":"/aspnet-core/upload/chunk_upload_save","removeUrl":"/aspnet-core/upload/chunk_upload_remove"},"validation":{"maxFileSize":20000000}});});</script>
</div>

Demo output for Kendo UI for jQuery

<div class="demo-section k-content">
   <div class="k-widget k-upload k-upload-async k-upload-empty">
      <div class="k-dropzone">
         <div class="k-button k-upload-button">
            <input name="files" id="files" type="file" data-role="upload" aria-label="Select files..." multiple="multiple" autocomplete="off">
            <span>Select files...</span>
         </div>
         <em class="k-dropzone-hint">Drop files here to upload</em>
      </div>
   </div>
</div>

[Clint]

Something else I've noticed is that the downloadable demo doesn't work the same as the demo on this site.

Demo on the site works as expected.

Demo downloaded with "Telerik UI for ASP.NET Core R3 2021" actually shows two results anytime a file is dragged and dropped. It works fine with one result when manually selecting the file with the button.

[Tsvetomir]

In general, the duplicates are observed only when the widget has been initialized twice. For instance with the jQuery code and the HtmlHelpers. Could you share the exact setup of your page? Also, could you try removing any caching that might be applied by the Visual Studio and/or browsers? 

I have tested out the example both in our live demos and the distributed project and it appears that it has consistent behavior across the two.

[Clint]

I cleared my browser and Visual Studio cache, but am still getting the same behavior in VS2019 for the downloaded demo "Telerik UI for ASP.NET Core R3 2021".

I also have a preview version of VS 2022 installed which lacks any extra extensions installed besides Telerik and the defaults. That one is working as expected. I will continue working with it and update with what I find.

[Tsvetomir]

In general, the implementation of the Telerik UI components is the same across all Visual Studio versions. Moreover, tests are performed with each preview and new versions of the ASP.NET Core framework. It would be helpful if you could share a sample where the defect can be observed so that I can debug it and get back to you with my findings.