Ejs-uploader not working on ipad, iphone devices

[Dimitris]

Hello,

I can't upload files in asp.net core app on ipad and iphone devices in any browser. 

I'm using Ejs-uploader and it doesn't seem to work properly in this case.

[Sureshkumar P]

Hi Dimitris,

When validating the reported requirement on iPhone and iPad devices the reported issue was not replicated on our end. the validated video demonstration is attached on the attachment.

If still you have faced the issue, then revert us with the below details.

1. Share the uploader component rendering code example

2. If possible, share the uploader component issue replicating the sample

3. Share your exact Syncfusion package version.

These details will help us to provide an exact solution as earlier as possible.

Regards,

Sureshkumar P

[Dimitris]

hello,

we have a multipart form data in which one of the elements is the uploader:

 

 <form enctype="multipart/form-data" asp-action="Update" autocomplete="off">
        <div class="container">
            <div class="d-flex justify-content-end">
                <ejs-button id="saveTestTp" type="submit" cssClass="vio-form-primary">
                    <e-content-template>
                        <i class="fas fa-save"></i>  Save
                    </e-content-template>
                </ejs-button>
                <ejs-button id="deleteTestTp" type="button" cssClass="vio-form-danger ml-3">
                    <e-content-template>
                        <i class="fas fa-trash"></i>  Delete
                    </e-content-template>
                </ejs-button>
            </div>
            <div asp-validation-summary="All" class="text-danger"></div>

             ...
                <div class="form-group">


                    @for (int i = 0; i < Model.TestExistingImages.Count; i++)
                    {
                        <input type="hidden" asp-for="@Model.TestExistingImages[i].FileName" />
                        <input type="hidden" asp-for="@Model.TestExistingImages[i].Id" />
                        <div class="row">
                            <div class="offset-md-3 col-md-9">
                                <div class="d-flex flex-row">
                                    <a rel='nofollow' href="@(Url.Content($"~/Content/{Model.UserName}/Tests/Images/" + (Model.TestExistingImages[i].FileName ?? "")))" target="_blank" class="mr-3">Photo</a>
                                    <div class="custom-control custom-checkbox">
                                        <input asp-for="@Model.TestExistingImages[i].ImageDeleted" type="checkbox" class="custom-control-input form-control-sm" />
                                        <label asp-for="@Model.TestExistingImages[i].ImageDeleted" class="custom-control-label col-form-label-sm custom-check-label">Delete Photo</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }


                    <div class="row">
                        <label asp-for="Images" class="col-md-3 col-form-label-sm"></label>
                        <div class="col-md-9 mb-4">
                            <ejs-uploader id="Images" autoUpload="false" multiple="true" maxFileSize="8 * 1024 * 1024" allowedExtensions=".png, .jpg, .jpeg, .jfif, .tiff"> </ejs-uploader>
                        </div>
                    </div>
                </div>

Also this is the code inside the Update controller method about the uploader:


                        foreach (var file in model.Images)

                        {
                            if (file.Length > 0 && file.ContentType.Contains("image"))
                            {
                                if (file.Length > 8 * 1024 * 1024) // 8MB
                                {
                                    ModelState.AddModelError("", "Το αρχείο δεν πρέπει να ξεπερνάει τα 8MB");
                                    PopulateModel(ref model, test);
                                    return View(model);
                                }


                                // Get unique filename for upload
                                string uploadFilename = FilesHelper.GetTestFileName(test.VisitId, test.Id, file.FileName);


                                string uploadsFolder = Path.Combine(hostingEnv.WebRootPath, @$"Content\{vetname}\Tests\Images");
                                string filePath = Path.Combine(uploadsFolder, uploadFilename);
                                using (FileStream fs = System.IO.File.Create(filePath))
                                {
                                    await file.CopyToAsync(fs);
                                }


                                TestFiles testFile = new TestFiles();
                                testFile.FileName = uploadFilename;
                                testFile.TestId = test.Id;
                                testFile.Type = "img";
                                await testFilesRepository.AddAsync(testFile);
                            }
                        }

The syncfusion version is 19.3.0.59.

As I said before uploader isn't working only on iOS devices.

Thank you in advance

[Sureshkumar P]

Dimitris, we have already fixed the issue in our 20.1.56 version onwards. We request you update the NuGet to the latest version to get rid of this issue.

Find the sample for the issue with the latest version in the attachment:

Attachment: webapp1_1f99e9f.zip

[Dimitris]

Good morning,

Thank you for your prompt replies BUT your sample does NOT work on MacOS, Safari 16.1 (17614.2.9.1.13, 17614). Your sample is using Syncfusion.EJ2.AspNet.Core version 20.3.0.61 and still, when run, the collection of files posted to the controller is null. 

Here is the controller code:

[HttpPost]
public async Task<IActionResult> Index(UpdateTestViewModel model)
{
    string uploadsFolder = Path.Combine(hostingEnv.WebRootPath, @$"Content\Tests\Images");
    foreach (var fileToUpload in model.Images)
    {
        string filePath = Path.Combine(uploadsFolder, fileToUpload.FileName);
        using (FileStream fs = System.IO.File.Create(filePath))
        {
            await fileToUpload.CopyToAsync(fs);
        }
    }
    return View(model);
}

The above code works fine on Windows (Chrome browser). But on Safari, the error is:

System.NullReferenceException
  HResult=0x80004003
  Message=Object reference not set to an instance of an object.
  Source=webapp1
  StackTrace:
   at webapp1.Controllers.HomeController.<Index>d__4.MoveNext() in HomeController.cs:line 36

Line 36 is: 

foreach (var fileToUpload in model.Images)

model.Images is null.

Any ideas?

Thank you very much in advance,

[Sureshkumar P]

Dimitris, after validating the requirement on the latest updated sample, the sample has old version scripts. After updating the latest version scripts in the _Layout.cshtml page the reported issue does not occur.

Find the screenshot here:

Find the latest updated sample in the attachment:

Find the latest updated scripts in _Layout.cshtml:

<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/20.4.38/fabric.css"

          asp-fallback-rel='nofollow' href="~/css/ej2/fabric.css"

          asp-fallback-test-class="e-prevent-select"

          asp-fallback-test-property="user-select"

          asp-fallback-test-value="none"

          asp-suppress-fallback-integrity="true" />

 

    <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js"

            asp-fallback-src="~/js/ej2/ej2.min.js"

            asp-fallback-test="window.ej"

            asp-suppress-fallback-integrity="true"></script>

Attachment: webapp1_cedc209d.zip