1
Answer

Cant upload image in custom-file-input

osyris zosar

osyris zosar
3y
833
1
Hi am trying to create a image upload system
but there seems to be a problem with the View while i try to upload
 
  1. <div class="form-group">  
  2.                 <label asp-for="Photo" class="custom-file"></label>  
  3.   
  4.                 <div class="custom-file">  
  5.                     <input type="file" asp-for="Photo"  class="custom-file-               input" name="customFile" id="customFile"/>  
  6.                     <label class="custom-file-label" for="customFile">Choose file</label>  
  7.                 </div>  
  8.                 <span asp-validation-for="Photo" class="text-danger"></span>  
  9.             </div>  
 this is the full page:
 
  1. @model Test4.ViewModels.ProductsViewModel  
  2.   
  3. @{  
  4.     ViewData["Title"] = "UploadImage";  
  5.     Layout = "~/Views/Shared/_Layout.cshtml";  
  6. }  
  7.   
  8. <h1>UploadImage</h1>  
  9.   
  10. <h4>Products</h4>  
  11. <hr />  
  12. <div class="row">  
  13.     <div class="col-md-4">  
  14.         <form asp-action="UploadImage">  
  15.   
  16.             <div class="form-group">  
  17.                 <label asp-for="ProductTitle" class="control-label"></label>  
  18.                 <input asp-for="ProductTitle" class="form-control" />  
  19.                 <span asp-validation-for="ProductTitle" class="text-danger"></span>  
  20.             </div>  
  21.             <div class="form-group">  
  22.                 <label asp-for="ProductDescription" class="control-label"></label>  
  23.                 <input asp-for="ProductDescription" class="form-control" />  
  24.                 <span asp-validation-for="ProductDescription" class="text-danger"></span>  
  25.             </div>  
  26.             <div class="form-group">  
  27.                 <label asp-for="Price" class="control-label"></label>  
  28.                 <input asp-for="Price" class="form-control" />  
  29.                 <span asp-validation-for="Price" class="text-danger"></span>  
  30.             </div>  
  31.   
  32.             
  33.   
  34.             <div class="form-group">  
  35.                 <label asp-for="Photo" class="custom-file"></label>  
  36.   
  37.                 <div class="custom-file">  
  38.                     <input type="file" asp-for="Photo"  class="custom-file-input" name="customFile" id="customFile"/>  
  39.                     <label class="custom-file-label" for="customFile">Choose file</label>  
  40.                 </div>  
  41.                 <span asp-validation-for="Photo" class="text-danger"></span>  
  42.             </div>  
  43.   
  44.             <div class="form-group">  
  45.                 <button type="submit" class="btn btn-outline-secondary" >Upload</button>  
  46.             </div>  
  47.         </form>  
  48.     </div>  
  49. </div>  
  50.   
  51. <div>  
  52.     <a asp-action="Index">Back to List</a>  
  53. </div>  
  54.   
  55. @section Scripts {  
  56.     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}  
  57. <script type="text/javascript">  
  58.     $(".custom-file-input").on("change", function () {  
  59.         var fileName = $(this).val().split("\\").pop();  
  60.         $(this).siblings(".custom-file-label").addClass("selected").html(fileName);  
  61.     });  
  62. </script>  
  63.  }  
  64.         
 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 :
  1. public class ProductsViewModel  
  2.     {  
  3.         [Required]  
  4.         [Display(Name = "Product Title")]  
  5.         public string ProductTitle { get; set; }  
  6.         [Required]  
  7.         [Display(Name = "Product Description")]  
  8.         public string ProductDescription { get; set; }  
  9.         [Required]  
  10.         public int Price { get; set; }  
  11.         [Required(ErrorMessage = "Please choose profile image")]  
  12.         public IFormFile Photo { get; set; }  
  13.     }  
 
Answers (1)
Next Recommended Forum