In this tutorial, we are going to learn how to upload file using Angular 6 and Asp Net Core with web API. After reading this tutorial, you will be able to understand angular image upload example, angular file upload example and other attachments using Angular 6 and Asp Net Core. First-of-all,we will create a model and create a table where we will store image path, then we will create a web API using .Net core, then we will create component and will add front-end, then finally, we will add service code for uploading files.
Note: – we will not create new project in this tutorial, we will use the previous tutorial which we have created in one of the previous tutorials. If you don’t know how to create new project with Angular 6 and Asp Net Core, then click here.
Previous Tutorial of Angular 6 and Asp Net Core Series
- How to setup a project using Angular CLI in VS Code?
- How to Setup a project with Angular 6 and ASP.NET Core 2.1 ?
- How to create CRUD Operations using Angular 6 and ASP.NET Core?
- How to implement Search functionality in Angular 6 & ASP.NET Core?
- How to implement server-side filtration in angular 6 & asp.net core ?
- How to sort record using angular 6 and asp.net core?
- Search, Sort, and Pagination in angular 6 and asp.net core.
- How to create web api in angular 6 and asp.net core?
- How to implement Angular 6 authentication and authorization using Asp Net Core?
Angular 6 image upload example with Asp Net Core?
Let’s start to understand Angular 6 file upload example or angular image upload example using Asp Net Core web API.
Step # 1: Create a Model for uploading file path in database.
First-of-all, we will create a model for storing the file path in database using entity framework. So, to do it, goto model folder => right click on model folder => then add a new file with the name of “file” and then add the properties as you see in below file.
Step # 2 : Define New DbSet for File class.
Now go to project folder structure and then open the DbContext file and then add the below line of code as you see in the below line.
public DbSet<file> files { get; set; }Step # 3 : Create files table in Database.
Now go to terminal and then run these below commands to create a new table in the database.
=> dotnet ef migrations add addFiles
=> dotnet ef migration database update
Note:- If you are using visual studio, then you will have package manager console. So, you need to run these below commands to create new table in database.
=> add-migration addFiles
=> database-update
Then go to SQL Server management studio and you will see the table in your database as you see in the below screenshot.
Step # 4 : Create a web API using Asp Net Core.
Go to project folder structure => then go to controller folder and a new file with the name like filesController.cs => then add the code as you see in below file.
Let’s understand the above code.
Line # 27 to 33: These lines are for validation. We will check if the file is valid or not.
Line # 34: In this line, we will create a new path where we will add our file.
Line # 35 and 36: In this line, we will add condition. If the path has required folder or not. If the path has folder, then it will add file otherwise it will create folder first, then add the file in that folder.
Line # 37: In this line, we will create a unique file name using Guid.
Line # 38: In this line, we will create a path with the combination of file name.
Line # 39 to 42: In these lines, we will use a stream to read the input files and then will store into the path.
Step # 5 : Create a new Component
Now go to desire project app folder directory and then create a new component. In this tutorial, we are going to add new component using angular commands. So, run the below command and it will create a new component.
=> ng g component upload-files
After running this command, you will see a newly created folder with the name of upload-files and this folder will have some files with .ts .html .less files.
Step # 6 : Add Route to newly created component.
Go to app.module.ts file and then add the path as you see in the below line.
{ path: ‘uploadFiles’, component: UploadFilesComponent },
Note: – If you don’t know how to add url path, then go to step # 9 code file(Line # 47).
Step # 7 : Add Front-end code
Now go to upload-files folder and then open the upload-files.component.html file and then add the below line of code into the file.
<input type="file" (change)="uploadPhoto()" #fileInput>
Step # 8 : Add A New Service for uploading files.
Now go to project folder structure and then go to services folder and then create a new file with the name of “files.services.ts”. Then add the below code as you see in the below file.
Step # 9 : Add service file path into the app.module.ts
Now go to project folder structure and open the app.module.ts file and then add the fileService into the providers as you see in the below file code line # 20, an line # 54.
Step # 10 : upload-files.component.ts file code.
Now open the upload-files.component.ts file and then add the below code as you see in the below code file.
Step # 11: Run your project.
Now, run the project and then go to this Url “http://localhost:5000/uploadFiles”. There you will a simple button. Just click on the button, it will open a window where you can choose file (Image), then click ok button. Then go to SQL server management studio and then open the files table and then you will see the output like this below.
Leave a Reply