File Upload and mobile camera

[Michele]

Is it possible to use SFUploader, as InputFile do, to upload a picture taken directly  from mobile camera?

If not is there a control in SF package to do it?

[Yohapuja Selvakumaran]

Hi Michele,

Thank you for reaching out us. If you require camera access and image capture in mobile mode, we suggest utilizing the accept="image/*; capture=camera" attribute within the Uploader component itself. This approach enables users to upload images by either browsing for files, using drag and drop functionality, or capturing images directly using the device's camera.

https://stackoverflow.com/questions/17241707/using-form-input-to-access-camera-and-immediately-upload-photos-using-web-app

https://stackoverflow.com/questions/68398715/blazor-server-side-how-to-select-camera-and-snap-a-picture

Regards,

Yohapuja S

[Michele]

I already knew this, I just wanted to know if it was possible also using SFUploader component which works in general better than FileInput.

Regards

Michele

[Yohapuja Selvakumaran]

Hi Michele,

We apologize for the delayed response. 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,

Yohapuja S