C#•2y ago

✅ Image input field is required

Hey guys i've been facing this error even for a while now and i don't have any idea how to fix it

keep in mind i'm new to asp.net & web development in general

here is a video that explains everything

Al3mid3xOP•6/29/24, 7:04 AM

here is my Product class:

dance?•6/29/24, 8:35 AM

just a text phrase describing the error would be nice

Ddance?just a text phrase describing the error would be nice

Al3mid3xOP•6/29/24, 9:37 AM

when i press create after filling the inputs the input field for image removes the image (which is displaying by javascript) and validation says it is required even tho in my product class i didn't put a Required attribute

Al3mid3xOP•6/29/24, 9:39 AM

Before Pressing Create Button :

Al3mid3xOP•6/29/24, 9:39 AM

after:

Al3mid3xOP•6/29/24, 9:40 AM

output

AAl3mid3x here is my Product class:

Klodious•6/29/24, 10:03 AM

I'm not sure, but try to put a breakpoint before the program checks the model validity, and see what is the value of image's byte array which is passed by the form, if it's null probably this is the cause, (the controller is trying to assign a null to a not nullable variable).

Klodious•6/29/24, 10:06 AM

if that's the problem, making the image nullable in the product class will resolve the issue

KKlodious I'm not sure, but try to put a breakpoint before the program checks the model va...

Al3mid3xOP•6/29/24, 10:11 AM

ye it says the value of the IFormFile in the controller class is null

Klodious•6/29/24, 10:12 AM

you can make the image nullable by adding '?' after the image type

KKlodious you can make the image nullable by adding '?' after the image type

Al3mid3xOP•6/29/24, 10:15 AM

well ye it did remove the validation message but how can i fix the file being null tho ?

Al3mid3xOP•6/29/24, 10:17 AM

what i'm trying to do is take a picture from the input and save it as a array of bytes in the database

Klodious•6/29/24, 10:18 AM

use an image of type "IFormFile" instead of a byte array

KKlodious use an image of type "IFormFile" instead of a byte array

Klodious•6/29/24, 10:18 AM

then you can cast it to store it

Al3mid3xOP•6/29/24, 10:19 AM

but how can i load it in the view ?

Klodious•6/29/24, 10:19 AM

sorry, I thought the problem occurs only when you submit the form with an empty image

Al3mid3xOP•6/29/24, 10:20 AM

i was using this as i saw somewhere on stackoverflow
<img id="productImage" alt="Product Image" src="data:image/*;base64,@(Convert.ToBase64String(Model.Image))"

Klodious•6/29/24, 10:21 AM

yes, you can turn it into a base 64 string and assign it like this

Klodious•6/29/24, 10:22 AM

or you can just store the images on the file system

Klodious•6/29/24, 10:22 AM

which imo is better I hate storing images on the db

KKlodious use an image of type "IFormFile" instead of a byte array

Klodious•6/29/24, 10:23 AM

did this work for u?

KKlodious did this work for u?

Al3mid3xOP•6/29/24, 10:24 AM

1sec

Al3mid3xOP•6/29/24, 10:25 AM

well ModelState is still not valid

KKlodious or you can just store the images on the file system

Al3mid3xOP•6/29/24, 10:26 AM

can you explain how to store it in if its actually easier

Al3mid3xOP•6/29/24, 10:26 AM

cuz its been pain in the ass trying to store it in db

AAl3mid3x well ModelState is still not valid

Klodious•6/29/24, 10:34 AM

I noticed you are missing the input HTML element for the image?

Al3mid3xOP•6/29/24, 10:35 AM

this one ?

KKlodious I noticed you are missing the input HTML element for the image?

Al3mid3xOP•6/29/24, 10:36 AM

                    <input type="file"
                        asp-for="Image"
                           accept="image/*"
                           class="custom-file-input"
                           onchange="document.getElementById('productImage').src = window.URL.createObjectURL(this.files[0])" />

                    <input type="file"
                        asp-for="Image"
                           accept="image/*"
                           class="custom-file-input"
                           onchange="document.getElementById('productImage').src = window.URL.createObjectURL(this.files[0])" />

AAl3mid3x ```html <input type="file" asp-for="...

Klodious•6/29/24, 10:39 AM

this is correct yeah

Klodious•6/29/24, 10:40 AM

is it still null?

Al3mid3xOP•6/29/24, 10:40 AM

yes

Klodious•6/29/24, 10:40 AM

can you share with me the latest create.cshmtl and the product.cs

Al3mid3xOP•6/29/24, 10:42 AM

Al3mid3xOP•6/29/24, 10:43 AM

Al3mid3xOP•6/29/24, 10:43 AM

and here is the Controller method

Al3mid3xOP•6/29/24, 10:43 AM

Klodious•6/29/24, 10:45 AM

I don't understand why are you using the file parameter in the controller and you have a file property in the product

Al3mid3xOP•6/29/24, 10:46 AM

i was following this tut https://stackoverflow.com/questions/42741170/how-to-save-images-to-database-using-asp-net-core

Stack Overflow

How to save Images to database using ASP.NET Core?

I am working on a small blog using ASP.NET Core(MVC 6) EF Visual Studio. I have trouble finding how to save images to a database. I have read about IFormfile but I do not really understand how to go

AAl3mid3x Click to see attachment

sibber•6/29/24, 10:46 AM

mark the props are required in c#

Klodious•6/29/24, 10:46 AM

if you want to make it like this because the file property in the product class has a different type then you need to remove the "Image" from the binding

sibber•6/29/24, 10:46 AM

also your error message says the range should start at 1 but youre starting at 0?

sibber•6/29/24, 10:47 AM

also [Key] is set by default on properties named Id or ClassNameId

KKlodious if you want to make it like this because the file property in the product class ...

Al3mid3xOP•6/29/24, 10:48 AM

aight

Ssibber mark the props are required in c#

Al3mid3xOP•6/29/24, 10:48 AM

how

Ssibber also your error message says the range should start at 1 but youre starting at 0...

Al3mid3xOP•6/29/24, 10:48 AM

didn't understand

AAl3mid3x how

sibber•6/29/24, 10:48 AM

public required int Price { get; set; }

public required int Price { get; set; }

Al3mid3xOP•6/29/24, 10:49 AM

oh ok

AAl3mid3x didn't understand

sibber•6/29/24, 10:49 AM

range attribute

Al3mid3xOP•6/29/24, 10:49 AM

sibber•6/29/24, 10:49 AM

your min value is set to 0

<input type="file" asp-for="Image" accept="image/*" class="custom-file-input" onchange="document.getElementById('productImage').src = window.URL.createObjectURL(this.files[0])" />