Upload .net core and MVC doesn't work in iOS

[Sam]

Has anyone else noticed that neither the .Net core or MVC upload module works when run under iOS? https://www.telerik.com/aspnet-core-ui/upload

If you try and upload anything you can never click submit.

 You can try it on the demo here on any iOS device - 

https://demos.telerik.com/aspnet-core/upload?_ga=2.7918193.219391470.1689953144-110638612.1682430985&_gl=1*wzaau5*_ga*MTEwNjM4NjEyLjE2ODI0MzA5ODU.*_ga_9JSNBCSF54*MTY4OTk1MzE0NC4xMS4xLjE2ODk5NTQxMDguNjAuMC4w

This seems to have broken when the move was made to go to Sass from Less a few months ago. It worked fine in Less. With it being such a major component it is something that you would hope gets fixed very quickly. 

[Alexander]

Hi Sam,

I noticed that you have submitted a private inquiry regarding the same subject matter. I am attaching my reply hear in for the community's benefit as well:

"There is a high probability that reported issue is strongly related to another one. However, I wanted to provide further details on the status of the second issue which may at this stage provide a stopper for the omission of both ones due to their relation.

At this stage, the second issue opposes some technical difficulties which are mostly related to the native widget's keyboard navigation capabilities. Which will more or less require the refabrication of the existing keyboard navigation functionality of the Upload thus far.

Nevertheless, for the current issue, in particular, there are a couple of workarounds that could help mitigate the unorthodox behavior. Please allow me to outline them in a more segregated manner:

Approach #1 

The first workaround revolves solely around the utilization of the z-index property for the button held responsible for submission operations and potentially calls the stopPropagation() method within the button's click handler. For example:

     <form method="post" action="/kendo-ui/upload/submit">
        <div class="custom">
          @(Html.Kendo().Upload()
                    .Name("upload")
                    ...
           )
          <button  type="submit" style="z-index: 2" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md">Submit</button>
        </div>
      </form>

Approach #2

The second workaround emphasizes the inclusion of an explicitly declared CSS rule:

<style>
  .k-upload-button-wrap input{
          z-index: 0;
      }
</style>

And from there, through client-side intervention, explicitly the click method of following the sibling of the "Select Files" button. For instance:

<script>
    $(document).ready(function() {
        $("#files").kendoUpload();
        $(document).on("click", ".k-upload-button-wrap .k-button", function(ev) {
          $(ev.target).next("[type=file]").click();
        })
    });
</script>

For your convenience, here is a Telerik REPL example that targets two "QR" components that can be scanned through an iOS device which will subsequently open a dojo example further showcasing the approach in a more live-action scenario:

• Telerik REPL for ASP.NET Core Example

Notice, that although the example tackles a Kendo UI for jQuery Scenario, the same approach is also applicable for the Telerik UI for ASP.NET Core and Telerik UI for ASP.NET MVC Upload incarnations.

To sum up, it appears that the issue may potentially be caused to how internal "iOS" CSS rules are applied for the input of type "file" that has a "position:absolute" applied. However, we will conduct further research to verify those suppositions."

Kind Regards,
Alexander
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

[Sam]

Thanks Alex. I will feedback once we have tested the workarounds - hopefully it will get fixed anyway.

[Alexander]

Hi Sam,

Thank you for the heads up. Please take as much time as you need in trying the previously mentioned suggestions and I am eager to hear back from you with more updates.

[Gordon]

Thanks for the workarounds, #1 did not work for me, #2 is working OK.  This has caused lots of grief with iPhone users!

[Sam]

Thanks for the feedback Gordon - we will try it and feedback. Yes - I am amazed that there are not more people reporting issues. 

[Sam]

We have gone with option 2 and that appears to be working so far. Hopefully it gets an official fix soon. 

[Alexander]

Thank you for your confirmation in regards to which issue managed to produce a higher success ratio as opposed to the other.

In order for other members of the community to benefit that do not stumble upon this discussion, I have also implemented the second suggestion within the following GitHub item as well:

https://github.com/telerik/kendo-ui-core/issues/7352

Thank you for your feedback yet again, it is greatly appreciated, as it helps us move forward as a unit.

[Gordon]

A clarification, I only implemented the style in #2, not the script.

[Alexander]

Hi Gordon,

Thank you for the additional clarification.

[Sam]

Update - still works. 

[Gordon]

Has there been an official fix for this issue yet?  I checked the release notes for 2023.3.1010 but it's not mentioned.

The issue is now appearing on IOS devices again despite implementing the CSS hack that worked previously.  I'm still using 2023.2.606.

[Alexander]

Hi Gordon,

I tried further replicating the behavior with an IOS device by explicitly utilizing the "2023.2.606" and the "2023.3.1010" versions of the previously mentioned alternatives, however, I did not manage to exhibit any failures upon opening the examples.

Here is a revised version of the previously sent examples:

Telerik REPL for ASP.NET Core (Revised)

I am also attaching an IOS screen capture that further demonstrates the behavior.

Note, that you can test the versions by:

• Clicking on the "Choose Library":

• Changing the version, and rerunning the example (this will generate a new link which you can then reference in the QR components within the REPL example):
  

@(Html.Kendo().QRCode()
    .Name("qrUrl2")
    .Value("https://dojo.telerik.com/@alexander64836/OLUvEQOQ/9")
    .ErrorCorrection(QRErrorCorrectionLevel.M)
    .Size(120)
    .Border(border => border.Color("#000000").Width(5))
)

 

[Gordon]

Hi Alexander,

Thank you for your work on this.  I have taken your dojo and attempted to make it more like the scenario that I am using.  I am  upgrading to bootstrap 5 now and it is during this upgrade that I have found the issue occurring again- it was OK using bootstrap 4.

I have set up this dojo https://dojo.telerik.com/@[e-mail]/uFaXASEv to attempt to better replicate my scenario.  In the dojo I currently don't know how to reference a licence file or the bootstrap-maim css file.  Can you help with the correct referencing of these files please?

[Alexander]

It appears that the problem is caused by the fact that the Upload component has a predominant width rule which is marked as "100%" which occupies depending on its container.

In the context of this scenario, it appears that the issue is caused due to the fact that the Upload has large proportions making it more visible than the submit button.

Thus a possible suggestion would be to employ the following rule for the width:

<style>

 .k-upload-button-wrap input{
      z-index: 0;
      width:auto;
  }

</style>

Additionally, I also noticed that the DOM element representing the upload widget is marked as a "div" element. It is important to mention that the element should be an input of type "file".

For your convenience here is a revised version of the previously sent Telerik REPL Example with the Bootstrap variant scenario:

• Telerik REPL for ASP.NET Core Example
  

[Gordon]

Hi Alexander,

Thank you for your help, adding the width:auto has fixed the issue on an IOS device.  I can now continue with the upgrade to bootstrap5.

I still cannot get my dojo to run though.  I still get an error about the licence not being activated.  I also note that you have added the angular.min.js script - why is this needed?

Gordon

[Alexander]

Hi Gordon,

Please allow me to apologize for not addressing your inquiry regarding the licensing file.

I would personally recommend the following documentation resource that you might find helpful when it comes to the licensing file mechanism's specifics:

Setting Up the License File (Documentation)

The license file mechanism will not break any builds and will not affect existing applications - it will purely act as a verification when the CDN distribution channel is utilized. The licensing file is primarily targeted for a given client's application infrastructure that utilizes the client-side resources.

The dojo is an internal tool that does not provide a licensing file, due to the aforementioned specifics. However, I personally agree that it may indeed seem misleading that certain warnings are outputted within the browser.

Thus, this is valid feedback and I will forward it to our fellow developer subject matter experts responsible for the Dojo's maintenance.

When it comes to the inclusion of "angular.min.js" it is supplemented automatically within dojo, but it is not a required resource that should be included. As a rule of thumb, you can review the following documentation which outlines all of the required client-side resources that should be inducted within a given Telerik UI for ASP.NET MVC application:

Providing Client-Side Resources for Telerik UI for ASP.NET MVC (Documentation)

I hope this provides more clarification regarding the subject matters

 

[Gordon]

Hi Alexander,

Thank you for your help so far with this issue but it is still a problem in a number of ways.

While setting the width:auto appeared to work ok on a iPhone, in the real word it does not work properly.  If the iPhone is put into portrait mode then the issue appears again.  Also using width:auto on a PC (using chrome in this case) causes issues with the width of the input overlapping with other components.

I have attached some screen shots showing the issues in various configurations:

IOS-Portrait: Appears to work OK, user can click the Next button (the Next button is the submit button)

IOS-Landscape: Does not work - cannot click the Next button or the Prev button

ChromeWindowsPC: Does not work - you can see the width of the field overlapping the drop down box, user can click Next or Prev button cannot use the dropdown.

 

As mentioned I am using 2023.2.606 with bootstrap 5.  I have looked at the release notes for later versions but cannot find any mention of this being fixed.

When can we expect a proper change to this component so that it works correctly on all platforms without having to apply custom CSS?  This is becoming a real issue for us as we cannot release a new version of our software until it is sorted out.

Gordon

 

[Alexander]

Hi Gordon,

I completely understand your concerns, and I am sorry to hear that the current issue at hand is a stopper during your implementational pipeline.

What I could do at this point is to raise your feedback to my respective manager Viktor Tachev, who is responsible for the MVC&Core division, and estimate whether the item can be prioritized more highly due to the currently inflicted impact on your premises.

In the meantime, I will try out some more solutions and update this forum thread in case - I have а breakthrough regarding my findings.

Once I receive further intel by my manager, I will update this thread as well.

[Gordon]

Hi Alexander,

Thanks for your feedback.  Please note that this is a more major issue than just MVC and Core, it's the component's operation once it is created that is the issue, as it won't work for around 50% of our users.

We need this sorted out quickly as we need to get a release out - this has been an issue for ages but nothing seems to be happening.

Should I submit this as a support ticket or leave the conversation here?

Gordon

[Alexander]

Hi Gordon,

Thank you for your patience. I have received further word from my manager about this ongoing case, and I can confirm that it has been forwarded to the Kendo UI for jQuery team, as the issue falls within that realm.

The Kendo UI for jQuery team has a current ongoing bug-fixing effort where the highly prioritized issues are triaged. Rest assured, this issue is considered as such, as it is a regressional behavior. The team will try its best to provide a fixed candidate in our newly upcoming release. However, as I do not want to fail to deliver on false promises, the date may vary.

Thus, I am personally embarking on the task of giving you further updates regarding the stature of the matter.

In the meantime, I will continue to look for any potential alternatives that could be applied.

[Gordon]

Hi Alexander,

Any new on an update to the Upload component?  I have checked the recent release notes but can find no mention of any fixes for this issue.  We are becoming desperate to release our new version, based around Bootstrap 5, and the Upload is the only item that is still outstanding.  There is no way we can release without this component working as expected on IOS devices.

Thanks

Gordon

[Tim]

Hi Alexander,

Any update on this issue? Is it going to be in the next release? 

The work around doesn't fully fix the issue. On an iPad or Mac, if you click or touch areas of the page without an element you still get the iOS file selector. 

Thanks,

Tim

 

[Alexander]

Hi,

I noticed that the item has been moved to an "In Progress" state. Thus, I will additionally contact the developer who has been assigned to this issue and will keep you guys posted by the end of the day regarding the status of the item.

[Sam]

Fantastic news! It would be great to get this fixed.

[Alexander]

Hi,

Please accept my apologies for the delay. I have received further word from our developer that this item is treated with a higher priority and thus it is currently in the process. So I am personally going to update you with how the efforts are going.

Hope all is well!