How to return list of files using ASP.NET Web API to Angular Application

Question

I have done some research, and I'm confused. My files(images and videos) are stored in a folder called 'Resources/Course Media' in my Web API's project directories, and the path to these files are stored in a SQL Server Database. I need to return course data and a list of media files to display in an Angular application.

Here is the Course DTO class that should contain all the data necessary on request from Angular

public class CoursesDTO
    {
        public int Id { get; set; }
        public string CourseNumber { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string TargetGroup { get; set; }
        public string Duration { get; set; }
        public decimal Price { get; set; }
        public string PartNumber { get; set; }
        //LIST OF MEDIA FILES
    }

Here is the code I use to receive uploaded course data and files and store it in the database and local folder.

public class CoursesBL
    {
        private Context _context;

        public CoursesBL(Context context) => _context = context;

        public void Create(IFormCollection form)
        {
            try
            {
                Course course = new Course()
                {
                    Name = form["name"],
                    CourseNumber = form["courseNumber"],
                    Description = form["description"],
                    Duration = form["duration"],
                    Price = Decimal.Parse(form["price"]),
                    PartNumber = form["partNumber"],
                    TargetGroup = form["targetGroup"]
                };

                _context.Courses.Add(course);

                foreach (var file in form.Files)
                {
                    var folderName = Path.Combine("Resources", "Course Media");
                    var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);

                    if (file.Length > 0)
                    {
                        var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.ToString().Trim('"');
                        var fullPath = Path.Combine(pathToSave, fileName);
                        var dbPath = Path.Combine(folderName, fileName);

                        using (var stream = new FileStream(fullPath, FileMode.Create))
                        {
                            file.CopyTo(stream);
                        }

                        _context.CourseMedia.Add(new CourseMedium
                        {
                            FileName = dbPath,
                            Title = file.Name,
                            Course = course
                        });
                    }
                    else
                    {
                        throw new Exception("BadRequest");
                    }
                }

                _context.SaveChanges();
            }
            catch (Exception e)
            {
                throw e;
            }
        }
    }

Any help will be appreciated.

Answer 1

You can only make request to get one file as HTTP response can contain at most 1 content.

To solve your problem , what you can do is - return file paths and for each file you can make individual request to get the content response to be shown in angular app.