Hi,
I have a form with photo upload but the file is at the bottom of the form.
I need it side by side the form to the right.
<div class="row">
<div class="col-md-4">
<form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post" enctype="multipart/form-data">
<h4>Create a new account.</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-floating">
<input asp-for="Input.firstName" class="form-control" />
<label asp-for="Input.firstName"></label>
<span asp-validation-for="Input.firstName" class="text-danger fs-6"></span>
</div>
<div class="form-floating">
<input asp-for="Input.lastName" class="form-control" />
<label asp-for="Input.lastName"></label>
<span asp-validation-for="Input.lastName" class="text-danger fs-6"></span>
</div>
<div class="form-floating">
<input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" />
<label asp-for="Input.Email"></label>
<span asp-validation-for="Input.Email" class="text-danger fs-6"></span>
</div>
<div class="form-floating">
<input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" />
<label asp-for="Input.Password"></label>
<span asp-validation-for="Input.Password" class="text-danger fs-6"></span>
</div>
<div class="form-floating">
<input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" />
<label asp-for="Input.ConfirmPassword"></label>
<span asp-validation-for="Input.ConfirmPassword" class="text-danger fs-6"></span>
</div>
<div class="form-floating">
<br />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.PictureSource" style="width: 100%;"><hr /></label>
<img id="imgPicture" style="width:200px;height:200px; object-fit:cover" src="~/profile.jpg">
<input type="file"
accept=".png,.jpg,.jpeg"
asp-for="Input.PictureSource"
class="form-control"
style="border:0px!important;padding: 0px;padding-top: 10px;padding-bottom: 30px;"
onchange="document.getElementById('imgPicture').src = window.URL.createObjectURL(this.files[0])" />
<span asp-validation-for="Input.PictureSource" class="text-danger"></span>
</div>
</div>
<button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
</form>
</div>
</div>
I tried:
style="width:200px;height:200px; object-fit:cover; float: left; display: inline;"
