Images are unavoidable in almost all applications. Previously we have implemented CRUD operation with a normal form without a file to upload. When we’ve got a form with a file uploader, there are few additional procedures. So let’s look at how to upload and retrieve images in ASP.NET Core MVC.
Sub-topics discussed :
- Design MVC Form to upload an Image
- Handle Image Form Submit
- Save the image to the server file.
- Retrieve uploaded back to the view.
- Delete image record and file.
Create ASP.NET Core MVC Project
In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N). Select Asp.Net Core Web Application template.
Once you provide the project name and location. A new window will be opened as follows, Select Web Application(MVC) and uncheck HTTPS Configuration. The above steps will create a brand new ASP.NET Core MVC project.
Define Model Class
Let’s create a database using Entity Framework Core. For that, we’ve to install corresponding NuGet Packages. So right-click on the project from Solution Explorer, select Manage NuGet Packages, From Browse Tab– search and install respective following 3 packages.
Now, let’s define DB model class
ImageModel in a new folder –
Apart from the Primary Key, we have columns
ImageName is used to save the name of the image.
ImageFile is a
NotMapped property, meaning there won’t a corresponding table column in the database, just used to receive the posted image file during form submission like a view-model property.
Now let’s define DbContext class
ImageDbContext for creating and managing the Database.
As per the above DbContext class, after the DB migration, there will be a table –
Images to save records corresponding to the model class
ImageModel. In order to interact with the DB, we need an instance of the DbContext class
ImageDbContext. For that, we’ll be using ASP.NET Core dependency injection in a bit.
Before that let’s talk about the class constructor parameter
options of the type
DbContextOptions,Into this options parameter we’ve to pass following informations.
- Database Provider: Specify the database that we want to use, whether it is SQL Server or MySQL etc.
- Location of Database: Connection string to the database that we want create.
Let’s save the connection string in
Now let me show you how to create an instance of
DbContext with dependency injection. Just update
Startup class method
ConfigureServices as shown below.
Here we’ve called the
AddDbContext method, to inject an instance of
PaymentDetailContext. Here, to set SQL Server as the DbProvider,
UseSqlServer function is called with the above connection string. How does this dependency injection work? that we can discuss once we create an MVC controller.
We’ve done everything for Database, Now let’s do the migration. For that select project from solution explorer, then go to Tools > NuGet Package Manager > Package Manager Console. then execute following commands one by one.
Add-Migration "InitialCreate" Update-Database
After successful migration, As per the connection string, new Database
ImageDB will be created with a new table
Images corresponding to the model class.
Create MVC Image Controller with CRUD Actions
To update and retrieve images, let’s create an MVC controller. right-click on Controllers folder Add > Controller, Select ‘MVC controller with views using Entity Framework’ template.
ImageController will be created with
With the help of Scaffolding Mechanism, new controller will be created with necessary action methods for all CRUD Operations.
Now let’s discuss how ASP.NET Core dependency injection helps this controller for interacting with DB. This
ImageController constructor has a parameter of the
ImageDbContext (which is
_context), ASP.NET Core will automatically inject the same class instance into the parameter as its value. We don’t have to create an instance of the context in each of the MVC controllers when the controller has a constructor parameter of the type
ImageDbContext. Now rest of the action methods could interact with the DB using this injected DbContext.
In above controller, we have shown action methods required for demonstrating image upload. there are other action methods too, but not used in this project. Let’s open this project inside your browser, go to Debug > Start without Debugging.
Now if you navigate the URL:
/Image/Create, you could see a form with input controls corresponding to each model properties except for
ImageFile. so we have to replace
ImageName input controls with an image/file uploader corresponding to
ImageFile property. After all,
Create.cshtml should look like this.
accept attribute, we’ve restricted the uploader only for image files. If there is a file uploaded in our form, we’ve to set the form attribute
enctype as ‘multipart/form-data’. If you reload the page, you could see the new form like this.
This form will be submitted to the
Create action method of the type
POST. there also we’ve to make some changes as shown below.
As you know, this is the meat of this article. Into the action method, we’ve bound model properties –
First of all, we save the image into wwwroot/Image folder. To do that we need the physical path up to wwwroot folder, for that we injected
IWebHostEnvironment property like our DbContext. A unique custom name for the image file is generated to avoid duplicate image files. Using
FileStream object, then we can save the image to the
images folder with the custom name.
As a second step, we insert image detail with the custom image-name into the DB. Now you could try to upload an image once you rebuild the solution.
After successfully completed with image upload, you will be re-directed to the index view. where inserted records will be listed from the Database table –
Retrieve and Delete Image
If you click on ‘Delete’ hyperlink,
Delete view will be opened by showing corresponding record details. In order to show the uploaded image back in the view, we’ve to make a few changes in
The main aim of the view is to confirm the delete operation. with
img control attribute
src attribute, retrieved image relative path is used. To append the base path, we can set the attribute
asp-append-version as true.
If you confirm this delete operation, it will reach up to the
DeleteConfirmed action method of the type
POST. by default, it has programmed to delete the corresponding record. Along with that, we’ve to delete the corresponding image file from the ‘image’ folder. for that, we can update the action method.
That’s all about Image Upload and Retrieve in ASP.NET Core MVC. If you want to implement the rest of the CRUD Operation – Edit, you could check out this article – ASP.NET Core MVC CRUD with Entity Framework. The following discussions might help you to extend your application.
- MVC CRUD operations using jQuery Ajax without reloading entire application.
- Implement user registration and login using ASP.NET Core Identity UI.
In our YouTube channel, we have discussed the same topic.