Creating file upload with .NET and Angular

I am very new to coding and have been asked to do a task that uses programs I am not familiar with (.NET and Angular). Additionally, I have very little experience with backend development, adding an extra layer of trickiness for me. The task is to create a "simple page to upload/view files. The page is split into two parts: upload area and view area.

  • Upload area - single for all files. File size and file types that can be uploaded to the server must be configurable. Validation for invalid data should present.
  • View area consists of tables - one table per permitted file type. Each table must reflect: file name, file size, upload date. Keep in mind that the number of files can be unlimited.
  • Add at least two unit tests for the back-end and two unit tests for the front-end. Tests must have positive and negative scenarios. Default tests added by angular cli will be ignored during the task evaluation.
  • API and UI must have layered architecture, code must follow common style guides and development principles"

I have done some research on how to do this and have built the following, each as separate apps, and each with elements I know I need, but not working together to complete this specific task:

  1. I followed the video and instructions to build this: How To Upload Files With .NET Core Web API and Angular

  2. I followed Angular guides to build a simple file upload, but don’t know how to connect it to a .NET backend like in the code above because I don’t understand backend: Angular File Upload - Complete Guide

  3. I’ve made a similar application using JavaScript before, but it again doesn’t connect to a backend and doesn’t use .NET or Angular (nametag generator on my github profile jrocca82)

How do I combine all of these in a way that accomplishes the file upload task? Instructions or more resources are helpful.

You basically build a frontend with Angular (a typescript framework for the browser) as a single page application (SPA). This can be hosted on GitHub Pages, Netlify, Vercel or other pages.

With ASP.NET (Microsoft’s web framework for .NET) you will build the backend (API) with the programming language C# and their IDE Visual Studio. It will provide you some basic templates to see and test how it works.
For example you can build a REST API which will have an endpoint to upload files and an endpoint to get a list of updated files.

Within your frontend you will communicate with the backend via HTTP. The browser offers APIs like fetch or XmlHttpRequest. The fetch API is the recommended way.