Upload Image to ASP.NET Razor Page

Question

Hello,
How to add image upload in asp.net core razor pages to a Create and Edit page that is generated from:

Add > New Scaffolded Item > Razor Pages using Entity Framework (KRUD)

to save the name of image to database and upload image file to folder ?

Thanks in advance.

Answer 1

Hi @Yusuf ,

How to add image upload in asp.net core razor pages to a Create and Edit page that is generated from:

Add > New Scaffolded Item > Razor Pages using Entity Framework (KRUD)

to save the name of image to database and upload image file to folder ?

You could refer the following sample:

1.Assume you have create an AppFile class to store the upload file into the database:

public class AppFile  
{  
    public int Id { get; set; }  
    public string FileName { get; set; }  
    public byte[] Content { get; set; }  
}  

public class ApplicationDbContext : IdentityDbContext  
{  
    public DbSet<AppFile> File { get; set; }  
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)  
        : base(options)  
    {  
    }  
}  

Enable migration and generate the database and data table, then use Scaffold to add the relates razor pages.

2.To upload file in asp.net core, we need to use the IFormFile, so, create a FileViewModel, like this:

public class FileViewModel  
{   
    public IFormFile FormFile { get; set; }  
}  

3.Update the Create.cshtml.cs file as below:

and modify the Create.cshtml page like this:

You can view the source code from here: 192030-file-create.txt, more detail information about file upload, see Upload files in ASP.NET Core.

Then, after running the application, the result like this:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

Hi, I followed the same thing but I Am getting This Exception

Can Anyone Suggest What I am doing wrong?