Being able to upload files and use them afterward is the required feature of many applications. Sometimes this is not a trivial task to accomplish.

So, this is going to be the topic for this blog post.

We are going to upload files to the server (.NET Core Web API part) and then to use those files in our Angular client app.

In this post, we will stick to the images, but the logic is reusable for other file types as well.

We have created the starter project to work with through this blog post and it can be downloaded from Upload Files .NET Core Angular Starter Project. We strongly recommend downloading this project because it would be much easier for you to follow along. In this project, we’ll create a new user and display all the created users as an additional feature. We are going to modify the create-logic part by adding an upload functionality having a new user created together with an image path related to it.

If you want to download our finished project, you can do that from Upload Files .NET Core Angular Starter Project.

We are going to divide this article into the following sections:

Controller and Action Logic – .NET Core Part

After you’ve downloaded our starter project, you can start by opening the UploadFilesServer project.

This project is created on top of the SQL database, so to create that database, we need to run the update-database command in a Package Manager Console window. By doing this, our migrations will be executed and the database with the required table will be created.

The next step is to create a new folder Resources and inside it a new folder Images:

static files - how to upload files with .Net core

To continue, let’s create a simple API Controller file in the Controllers folder and name it UploadController.

Let’s modify that file by adding a new action that will be responsible for the upload logic:

We are using a POST action for the upload-related logic and disabling the request size limit as well.

The logic inside this action is pretty straightforward. We extract the file from the request and provide the path where the file will be stored. Moreover, if the file has a length greater then zero, we just take its name and provide a full path on the server to store our file to and a path to the database. This database path is going to be returned as a result of this action after we place our stream into the defined folder. We could also check if a file with the same name already exists, but didn’t want to make the code more complicated at this moment.

Serving Static Files

Usually, all the files in the wwwroot folder are servable for the client applications. We provide that by adding app.UseStaticFiles() in the Startup class in the Configure method. Of course, our uploaded images will be stored in the Resources folder, and due to that, we need to make it servable as well. To do that, let’s modify the Configure method in the Startup.cs class:

And that’s all it takes. We have prepared our server-side app and it is time to jump right to the client side code.

If you want to learn in great detail about .NET Core project development, you can visit the .NET Core Tutorial.

Upload Files – Angular Part

Let’s open the UploadFilesClient project and take a look at the app component files. For the sake of simplicity, we have implemented all of our logic inside the app component.

To learn in great detail about Angular project development, you can read the Angular Tutorial.

So, the first thing we are going to do is to create a new Upload component in which we will handle all the upload-related logic:

This will create three files in the upload folder, and we are going to modify the upload.component.ts file first:

So, what’s going on here?

We create two public variables. First one to hold the message when upload action is finished and the second one to show the upload progress. In the uploadFile function, we create a formData object and append our file that we want to upload.

The next action is to send a post request and pay attention to it. Besides the URL and body properties, we have another JSON object which states that we want to track changes of our HTTP request progress. As long as the upload is in progress, we will update the progress variable and show that percentage on the screen, but as soon as the upload is finished, we are going to write a message on the screen and emit a new event.

This event contains the body of our response, which is simply the database path of our uploaded file. We need that path to display uploaded image with other user details.

The files with the small size will be instantly uploaded so, we will see 100% progress as soon as we select our file. But for the larger files, the progress bar will update its values for sure.

Displaying Functionalities

To display all of the mentioned functionalities on the screen, we need to modify the update.component.html file now:

This logic is pretty straightforward except to the part where we hide the actual upload control and use its reference (#file) to invoke its click event with the button, which looks much better. We could have styled the upload control as well, but this is the better way, at least from our point of view.

Finally, let’s modify the upload.component.css file:

And add a selector from the upload component to the app.component.html file:

Excellent. We can now inspect our result:

create user - How to upload files with .Net Core

We can check our Resources/Images folder as well, to be sure that the files are really uploaded:

file uploaded - How to upload files in .NET Core

 

Using Uploaded File in Our Application

As soon as we press the Create button on our form, we are going to see our newly created user. But its profile picture won’t be rendered. So, let’s fix that.

First, we need to react on the onUploadFinished event from the update component, and to do that let’s modify the app.component.html file:

This change forces us to modify the app.component.ts file as well.

First, let’s add an additional property in that file:

Then let’s add the uploadFinished function to populate this property:

With this modification, we have the response object in which we can find a path to be saved in the database.

Lastly, we have to modify the user object in the onCreate function in the same file:

Great job. Now we know the image file path related to the created user, so let’s use that knowledge to render that picture next to other user details.

To do that, let’s change a table inside the app.component.html file:

And let’s modify the app.component.ts file by adding the createImgPath function:

Our result should be as follows:

used downloaded picture

Uploading Multiple Files

If we want to upload multiple files in any of our projects, we need to modify both the server and client side code.

So let’s start with the server side:

After this modification, let’s change the client side. First, we need to modify the input type file control by adding the multiple attribute:

After that, we are going to modify the uploadFile function:

One interesting thing to pay attention is the use of the Array.from() function. Even though the filesvariable contains all the selected files, it is not an array. So, in order to use the mapfunction, we are using the Array.from()syntax, which will convert the array like object into the new array copy.  The rest of the logic is pretty straight forward.

And that is all that takes. Now you can test your code and check that your files are uploaded.

Conclusion

In this article, we have learned:

  • How to code our server-side action to handle file uploading
  • The way to create an upload component in our Angular application
  • How to use uploaded files in the Angular application

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published .NET Core content we encourage you to subscribe to our blog.