IMAGE UPLOAD USING PHOTO PICKER DIALOG
Nandini S
20
Reputation points
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 .