IMAGE UPLOAD USING PHOTO PICKER DIALOG

Nandini S 20 Reputation points
2024-05-02T10:39:55.1833333+00:00

RegistrationForm.cshtml

 <div class="mt-2">
                        <div class="row">
                            <div class="col-7 col-sm-6">
                                <div class="d-flex flex-column justify-content-around align-items-center" style="height: 100%;">
                                    <p class="text-center">Profile Picture</p>
                                    <button type="submit" asp-page-handler="TakePhoto" class="btn btn-outline-primary btn-sm">Take Photo</button>
                                </div>
                            </div>
                            <div class="col-5 col-sm-6">
                                <div class="d-flex justify-content-center align-items-center">
                                    <img src="@Model.ProfilePhoto" height="75" />
                                </div>
                            </div>
                        </div>
                    </div> 

RegistrationForm.cshtml.cs

public  async Task<IActionResult> OnPostTakePhoto()
{
    DialogOptions options = new DialogOptions() { DisableBackdropClick = true, NoHeader = true };    var dialog = DialogService.Show<PhotoPickerDialog>(string.Empty, options);
   var result = await dialog.Result;
   if (!result.Cancelled)
   {
      var vm = (PhotoPickerVm)result.Data;
        PhotoBase64String = vm.File;
        if (PhotoBase64String != null)
        {
            ProfilePhoto = vm.ImageAsString;
          PhotoFileNam
e = vm.FileName;
        }
        else
        {
            Notify. Add(TempData,false,"Could'nt get the photo", "");
        }
    }
    else
    {
        Notify. Add(TempData, false, "Operation was canceled","");
   }    return Page();
}

 DialogOptions options = new DialogOptions() { DisableBackdropClick = true, NoHeader = true };
        //    var dialog = DialogService.Show<PhotoPickerDialog>(string.Empty, options); 

I am trying to create photo picker box using razor components but these lines are used by blazor components . what needs to be used in razor components to open photopicker dilog page to insert image or selecting, uploading and after selecting image these condtion should be satisfied based on selected or not selected . and i dont want to use javascipt here .

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,227 questions
ASP.NET API
ASP.NET API
ASP.NET: A set of technologies in the .NET Framework for building web applications and XML web services.API: A software intermediary that allows two applications to interact with each other.
303 questions
{count} votes