Cant upload image in custom-file-input

Hi am trying to create a image upload system

but there seems to be a problem with the View while i try to upload

<div class="form-group">
<label asp-for="Photo" class="custom-file">label>
<div class="custom-file">
<input type="file" asp-for="Photo" class="custom-file- input" name="customFile" id="customFile"/>
<label class="custom-file-label" for="customFile">Choose filelabel>
div>
<span asp-validation-for="Photo" class="text-danger">span>
div>

this is the full page:

@model Test4.ViewModels.ProductsViewModel
@{
ViewData["Title"] = "UploadImage";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>UploadImageh1>
<h4>Productsh4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="UploadImage">
<div class="form-group">
<label asp-for="ProductTitle" class="control-label">label>
<input asp-for="ProductTitle" class="form-control" />
<span asp-validation-for="ProductTitle" class="text-danger">span>
div>
<div class="form-group">
<label asp-for="ProductDescription" class="control-label">label>
<input asp-for="ProductDescription" class="form-control" />
<span asp-validation-for="ProductDescription" class="text-danger">span>
div>
<div class="form-group">
<label asp-for="Price" class="control-label">label>
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" class="text-danger">span>
div>
<div class="form-group">
<label asp-for="Photo" class="custom-file">label>
<div class="custom-file">
<input type="file" asp-for="Photo" class="custom-file-input" name="customFile" id="customFile"/>
<label class="custom-file-label" for="customFile">Choose filelabel>
div>
<span asp-validation-for="Photo" class="text-danger">span>
div>
<div class="form-group">
<button type="submit" class="btn btn-outline-secondary" >Uploadbutton>
div>
form>
div>
div>
<div>
<a asp-action="Index">Back to Lista>
div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(".custom-file-input").on("change", function () {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
script>
}

It shows the name of the image in the input field and when hover over the input it shows the file as well

but once i hit submit it gives me the error and tells me that it is required.

ProductViewModel :

public class ProductsViewModel
{
[Required]
[Display(Name = "Product Title")]
public string ProductTitle { get; set; }
[Required]
[Display(Name = "Product Description")]
public string ProductDescription { get; set; }
[Required]
public int Price { get; set; }
[Required(ErrorMessage = "Please choose profile image")]
public IFormFile Photo { get; set; }
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Mario Scheeren5y ago
Let me get this straight:

You have an INPUT with ID customFile and expect it to send a FILE using Magic to change the Name to be Photo so it can match your ProductsViewModel?

You should inspect the (form)data being send to understand, what is going on.