TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
osyris zosar
NA
289
26.6k
Cant upload image in custom-file-input
Mar 29 2021 11:47 AM
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 file
</
label
>
</
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
>
UploadImage
</
h1
>
<
h4
>
Products
</
h4
>
<
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 file
</
label
>
</
div
>
<
span
asp-validation-for
=
"Photo"
class
=
"text-danger"
>
</
span
>
</
div
>
<
div
class
=
"form-group"
>
<
button
type
=
"submit"
class
=
"btn btn-outline-secondary"
>
Upload
</
button
>
</
div
>
</
form
>
</
div
>
</
div
>
<
div
>
<
a
asp-action
=
"Index"
>
Back to List
</
a
>
</
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
; }
}
Reply
Answers (
1
)
how to create datatble and bind columns using entity framework core
json Date format issue