Assistance Required with File Upload and Camera Access in Maui Blazor Hybrid (.NET 9)

[Devarajan]

Dear Team,

We are currently testing the file upload functionality in the MAUI Blazor Hybrid application with .NET 9. While all the CRUD operations (Create, Read, Update, Delete) are working fine on both web and mobile, we are encountering issues specifically with file upload and camera access on mobile devices.

The file upload functionality works perfectly on the web, but it is not functioning on mobile devices. Additionally, camera access is also not working when using Syncfusion components.

Could you kindly provide guidance or any resources on how to implement file upload functionality for mobile devices, as well as how to enable camera access within the Syncfusion file upload component? Currently working on the Syncfusion.Blazor..... 31.1.21 version package 

[Priyanka Karthikeyan]

Hi Devarajan,

Thank you for reaching out. It is indeed possible to achieve this functionality in our Syncfusion control as well. You can set the "accept" attribute in HTML to "image/*;capture=camera" to enable this feature. Please refer to the code snippet below for further reference.

Code Snippet:

@using Syncfusion.Blazor.Inputs

 

<SfUploader AutoUpload="true" HtmlAttributes="@htmlAttr" AllowedExtensions=".png, .jpeg, .jpg">

    <UploaderEvents ValueChange="@OnInputFileChange">

    </UploaderEvents>

</SfUploader>

 

@code{

    Dictionary<string, object> htmlAttr = new Dictionary<string, object>();

    private async Task OnInputFileChange(UploadChangeEventArgs args)

    {

        try

        {

            foreach (var file in args.Files)

            {

                var path = @"" + file.FileInfo.Name;

                FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);

                await file.File.OpenReadStream(long.MaxValue).CopyToAsync(filestream);

                filestream.Close();

            }

        }

        catch (Exception ex)

        {

            Console.WriteLine(ex.Message);

        }

    }

 

    public void onCreate()

    {

        this.htmlAttr.Add("accept", "image/*;capture=camera");

    }

}

 

Regards,

Priyanka K

[Devarajan]

Dear  Priyanka Karthikeyan

   I tried running the code you provided, but unfortunately, it’s not working with my implementation. Please find my code below for your reference. Kindly review it and let me know what might be causing the issue.

     <SfUploader @ref="UploadObj" HtmlAttributes="@htmlAttr" AutoUpload="true" AllowedExtensions=".png, .jpg, .jpeg" AllowMultiple="true">

        <UploaderButtons Browse="Browse"></UploaderButtons>

        <UploaderEvents ValueChange="@OnChangeReport"></UploaderEvents>

    </SfUploader>

    <div class="spacer"></div>

    

  public async Task OnChangeReport(UploadChangeEventArgs args)

  {

      foreach (var file in args.Files)

      {

          // Convert uploaded file to Base64 string

          var memoryStream = new MemoryStream();

          using var fileStream = file.File.OpenReadStream(long.MaxValue);

          await fileStream.CopyToAsync(memoryStream);

          byte[] bytes = memoryStream.ToArray();

          string base64 = $"data:image/jpg;base64,{Convert.ToBase64String(bytes)}";

          ImageBase64List.Add(base64);

          FileIndex.Add(Guid.NewGuid().ToString());

      }

  public void onCreate()

  {

      this.htmlAttr.Add("accept", "image/*;capture=camera");

  }

   Dictionary<string, object> htmlAttr = new Dictionary<string, object>();

[Priyanka Karthikeyan]

Hi Devarajan,

 

Thank you for your continued patience.

Upon further analysis, it appears that this issue occurs even when using the native file upload functionality in .NET MAUI. This suggests that the behavior is not limited to a specific implementation but may be related to underlying platform constraints.

For your reference, we’ve included a couple of helpful resources where similar issues have been discussed by the developer community:

• Stack Overflow – Unable to use mobile device camera in Blazor MAUI Hybrid application

• GitHub MAUI Issue #884

To further confirm, here’s a simple example using the native uploader:

<InputFile />

Please let us know if you observe the same on your end. Your confirmation will help us proceed accordingly.

Regards,

Priyanka K