Our Blog

// VehicleQuotes.AdminPortal/Program.cs

app.UseStaticFiles();

// VehicleQuotes.WebApi/Models/QuoteImage.cs

namespace VehicleQuotes.WebApi.Models;

public class QuoteImage
{
    public int ID { get; set; }
    public string FileName { get; set; } = default!;

    public int QuoteId { get; set; }
    public Quote Quote { get; set; } = default!;
}

// VehicleQuotes.WebApi/Models/Quote.cs

public class Quote
{
    // ...
    public ICollection<QuoteImage> QuoteImages { get; set; } = [];
}

// VehicleQuotes.WebApi/Data/VehicleQuotesContext.cs

public class VehicleQuotesContext : IdentityUserContext<IdentityUser>
{
    // ...
    public DbSet<QuoteImage> QuoteImages { get; set; }
    // ...
}

dotnet ef migrations add AddQuoteImages
dotnet ef database update

vehicle_quotes=# \d quote_images;
                          Table "public.quote_images"
  Column   |  Type   | Collation | Nullable |             Default
-----------+---------+-----------+----------+----------------------------------
 id        | integer |           | not null | generated by default as identity
 file_name | text    |           | not null |
 quote_id  | integer |           | not null |
Indexes:
    "pk_quote_images" PRIMARY KEY, btree (id)
    "ix_quote_images_quote_id" btree (quote_id)
Foreign-key constraints:
    "fk_quote_images_quotes_quote_id" FOREIGN KEY (quote_id) REFERENCES quotes(id) ON DELETE CASCADE

// VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using VehicleQuotes.WebApi;
using VehicleQuotes.WebApi.Models;

namespace VehicleQuotes.AdminPortal.Pages.Quotes;

public class EditModel : PageModel
{
    // This page will interact with the database so we need an instance of the
    // DbContext.
    private readonly VehicleQuotesContext _context;
    private readonly string _imagesPath;

    public EditModel(VehicleQuotesContext context)
    {
        _context = context;
        // Like we discussed, we will store the image files in the app's wwwroot
        // directory. Specifically, ~/wwwroot/uploads. It'd be better to
        // substitute this hard coded string with a config value from
        // appsettings.json.
        _imagesPath = "/path/to/wwwroot/uploads";
    }

    // The BindProperty attribute in this property makes it so that when a form
    // in this page is submitted, the framework takes the request payload and
    // uses it to populate this property. In our case, the form will submit a
    // set of files. We'll see how a little bit later.
    [BindProperty]
    public IEnumerable<IFormFile>? ImageFiles { get; set; }

    // This GET handler method does little else than render the corresponding
    // template when a browser requests the quotes/edit/{id} URL.
    // That is, the one defined in
    // VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml.
    public IActionResult OnGet(int id) => Page();

    // This is the method that handles POST requests on this page. It inspects
    // the incoming request payload and uses it to produce new quote image
    // records as well as save the uploaded files under ~/wwwroot/uploads.
    public async Task<IActionResult> OnPostSaveAsync(int id)
    {
        // First, try to find the quote record by the given id and...
        var quote = await FindQuote(id);

        // ...if it's not found, return a proper 404 response.
        if (quote == null)
        {
            return NotFound();
        }

        // If images were uploaded...
        if (ImageFiles is not null)
        {
            // ...iterate over each one of them...
            foreach (var imageFile in ImageFiles)
            {
                // ...store them in the file system...
                var imageFileName = await SaveImageFile(imageFile);
                // ...and add a new corresponding record to the quote's related
                // image records.
                quote.QuoteImages.Add(new() { FileName = imageFileName });
            }
        }

        // Finally, submit the database changes...
        await _context.SaveChangesAsync();

        // ...and effectively reload the page.
        return RedirectToPage("./Edit", new { Id = id });
    }

    // This method queries the database to find quote records by id.
    private async Task<Quote?> FindQuote(int id) =>
        await _context.Quotes
            .FirstOrDefaultAsync(m => m.ID == id);

    // This method has some mostly straightforward code to save the files from
    // the incoming HTTP request into the file system.
    private async Task<string> SaveImageFile(IFormFile fileToSave)
    {
        var extension = Path.GetExtension(fileToSave.FileName).ToLowerInvariant();
        // The only interesting thing that we have to keep in mind is that we
        // need to come up with a naming scheme that won't produce conflicts.
        // Here, we've taken the naive approach of just using
        // Path.GetRandomFileName to create randomized names.
        var fileName = $"{Path.GetRandomFileName()}{extension}";
        var filePath = Path.Combine(_imagesPath, fileName);

        using var stream = System.IO.File.Create(filePath);
        await fileToSave.CopyToAsync(stream);

        return fileName;
    }
}

<!-- VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml -->

@page "{id}"
@model VehicleQuotes.AdminPortal.Pages.Quotes.EditModel

@{
    ViewData["Title"] = "Details";
}

<h1>Edit</h1>

<h4>Add Images</h4>
<hr />

<div class="row">
    <!--
    The form doesn't need too many details. We do have to make sure to set its
    enctype attribute to multipart/form-data to allow it to include files.
    -->
    <form method="post" enctype="multipart/form-data">
        <div id="quote-images-container" class="row">
            <div class="col-3 mb-3">
                <!--
                These are regular old HTML file input elements. They all have
                the same name, which matches that of the property in the
                PageModel that we want the framework to populate.
                That is, "ImageFiles".
                -->
                <input
                    type="file" accept="image/*"
                    id="ImageFiles_0" name="ImageFiles" class="form-control"
                >
            </div>

            <div class="col-3 mb-3">
                <input
                    type="file" accept="image/*"
                    id="ImageFiles_1" name="ImageFiles" class="form-control"
                >
            </div>

            <div class="col-3 mb-3">
                <input
                    type="file" accept="image/*"
                    id="ImageFiles_2" name="ImageFiles" class="form-control"
                >
            </div>
        </div>

        <div class="form-group mb-3">
            <!-- This button submits the form. -->
            <button
                type="submit"
                asp-page-handler="Save"
                class="btn btn-primary"
            >
                Save
            </button>
        </div>
    </form>
</div>

<div class="row">
    <a asp-page="./Index">Back to List</a>
</div>

$ ls wwwroot/uploads
sqyjb1ui.qnv.png  x1c4s4fj.rqb.png  zjaym20f.wcx.png

vehicle_quotes=# select * from quote_images;
 id |    file_name     | quote_id
----+------------------+----------
  1 | sqyjb1ui.qnv.png |        1
  2 | zjaym20f.wcx.png |        1
  3 | x1c4s4fj.rqb.png |        1
(3 rows)

<!-- VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml -->

<!-- ... -->

<div id="quote-images-container" class="row">
    <div class="col-3 mb-3">
        <input type="file" accept="image/*" id="new-quote-image-file" class="form-control" />
    </div>
</div>

<template id="quote-image-template">
    <div class="col-3 mb-3">
        <input type="file" accept="image/*" name="" id="" class="form-control" />
    </div>
</template>

<!-- VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml -->

<!-- ... -->

@section scripts {
    <script src="~/js/quotes.new-images.js" asp-append-version="true"></script>
}

// VehicleQuotes.AdminPortal/wwwroot/js/quotes.new-images.js

window.addEventListener('DOMContentLoaded', _event => {
    // First of all we attach the "addNewFileInput" function to the change event
    // of the default file input element.
    const newFileInput = document.querySelector("#new-quote-image-file");
    newFileInput.addEventListener("change", addNewFileInput);

    // We use this counter to set the ids of the file input elements as they get
    // added.
    let imageInputCount = 0;

    // This function, which handles the file input's change event, updates the
    // input element that triggered the event so that it can be submitted with
    // the form and also creates a new empty file input ready to accept a new
    // file. See the comments on the "convertToSubmittable" and
    // "createNewFileInput" functions to learn how.
    function addNewFileInput(event) {
        convertToSubmittable(event.target)
        createNewFileInput();

        imageInputCount++;
    }

    // This function takes the file input element that the user interacted with
    // and changes its name to "ImageFiles". That way, when the form is
    // submitted, ASP.NET knows that it needs include the file from this
    // element when populating the "ImageFiles" property.
    // We also detach the change event handler, because once a file
    // is selected on it, we don't want new inputs being created if the user
    // changes the file. It is only the new empty file input that will be
    // responsible of creating another new empty one once it is filled.
    function convertToSubmittable(fileInput) {
        fileInput.setAttribute("name", "ImageFiles");
        fileInput.setAttribute("id", `ImageFiles_${imageInputCount}`);

        fileInput.removeEventListener("change", addNewFileInput);
    }

    // Here we leverage the template to create and attach a new empty file input
    // element. Importantly, we set the addNewFileInput to handle its change
    // event. That way, when the user picks a file to put in the newly created
    // file input, the whole process runs again to get the element ready for
    // submission and create a new empty one.
    function createNewFileInput() {
        const template = document.querySelector("#quote-image-template");
        const clone = template.content.cloneNode(true);

        let fileInput = clone.querySelector("input");
        fileInput.setAttribute("id", "new-quote-image-file");

        appendToContainer(clone);

        fileInput.addEventListener("change", addNewFileInput);
    }

    function appendToContainer(element) {
        const container = document.querySelector("#quote-images-container");
        container.appendChild(element);
    }
});

// VehicleQuotes.AdminPortal/Validation/AllFilesHaveImageFileExtensionAttribute.cs

using System.ComponentModel.DataAnnotations;

namespace VehicleQuotes.AdminPortal.Validation;

[AttributeUsage(AttributeTargets.Property)]
public class AllFilesHaveImageFileExtensionAttribute : ValidationAttribute
{
    // These are the file extensions that we accept.
    private static readonly string[] imageExtensions =
        [".png", ".jpg", ".jpeg", ".gif", ".bmp"];

    // This method is called by the framework when processing the request to
    // validate the incoming payload.
    protected override ValidationResult? IsValid(
        object? value, ValidationContext context
    ){
        if (value == null) return ValidationResult.Success;

        ThrowIfTypeIsNotSupported(value);

        if (!CheckIfIsValid(value))
            return new ValidationResult(GetErrorMessage());

        return ValidationResult.Success;
    }

    // In this method we make sure that the attribute is only applied to
    // properties of type IEnumerable<IFormFile>. It only works with those.
    private void ThrowIfTypeIsNotSupported(object value)
    {
        if (value is not IEnumerable<IFormFile>)
        {
            throw new ArgumentException($"{GetType().Name} only works with properties of type IEnumerable<IFormFile>.");
        }
    }

    // Here we check that all the files in the collection meet the criteria
    // defined in "HasImageExtension".
    private static bool CheckIfIsValid(object value)
    {
        var files = (IEnumerable<IFormFile>)value;
        return files.All(HasImageExtension);
    }

    // This is the core of our validation logic. This method checks that each
    // given file has one of the extensions from the "imageExtensions" array.
    private static bool HasImageExtension(IFormFile file)
    {
        var extension = Path.GetExtension(file.FileName).ToLowerInvariant();

        if (string.IsNullOrEmpty(extension) || !imageExtensions.Contains(extension))
        {
            return false;
        }

        return true;
    }

    // Here we produce an error message that's easily understandable for users.
    // Letting them know which extensions our app supports.
    private static string GetErrorMessage()
    {
        var allowedExtensions = string.Join(", ", imageExtensions);
        return $"Only the following file extensions are allowed: {allowedExtensions}.";
    }
}

// VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml.cs

[BindProperty]
[AllFilesHaveImageFileExtension] // <- Here's the new attribute.
public IEnumerable<IFormFile>? ImageFiles { get; set; }

// VehicleQuotes.AdminPortal/Validation/AllFilesAreNotEmptyAttribute.cs

using System.ComponentModel.DataAnnotations;

namespace VehicleQuotes.AdminPortal.Validation;

[AttributeUsage(AttributeTargets.Property)]
public class AllFilesAreNotEmptyAttribute : ValidationAttribute
{
    protected override ValidationResult? IsValid(object? value, ValidationContext context)
    {
        if (value == null) return ValidationResult.Success;

        ThrowIfTypeIsNotSupported(value);

        if (!CheckIfIsValid(value)) return new ValidationResult(GetErrorMessage());

        return ValidationResult.Success;
    }

    private void ThrowIfTypeIsNotSupported(object value)
    {
        if (value is not IEnumerable<IFormFile>)
        {
            throw new ArgumentException($"{GetType().Name} only works with properties of type IEnumerable<IFormFile>.");
        }
    }

    // This is the only part that's meaningfully different from the other
    // validation attribute we just wrote. Here, we simply check that the
    // uploaded file's length attribute is greater than zero. In other words:
    // we check that the file isn't empty.
    private static bool CheckIfIsValid(object value)
    {
        var files = (IEnumerable<IFormFile>)value;
        return files.All(file => file.Length > 0);
    }

    private static string GetErrorMessage() => "Some of the selected files appear to be empty.";
}

// VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml.cs

[BindProperty]
[AllFilesHaveImageFileExtension]
[AllFilesAreNotEmpty] // <- Here it is.
public IEnumerable<IFormFile>? ImageFiles { get; set; }

public async Task<IActionResult> OnPostSaveAsync(int id)
{
    var quote = await FindQuote(id);

    if (quote == null)
    {
        return NotFound();
    }

+    if (!ModelState.IsValid)
+    {
+        return Page();
+    }

    if (ImageFiles is not null)
    {
        foreach (var imageFile in ImageFiles)
        {
            var imageFileName = await SaveImageFile(imageFile);
            quote.QuoteImages.Add(new() { FileName = imageFileName });
        }
    }

    await _context.SaveChangesAsync();

    return RedirectToPage("./Edit", new { Id = id });
}

using VehicleQuotes.AdminPortal.Validation;

<form method="post" enctype="multipart/form-data">
+    <div asp-validation-summary="All" class="text-danger"></div>

    <!-- ... -->
</form>

// VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml.cs

// ...

public class EditModel : PageModel
{
    // ...

    // Here's the property we talked about. We need it so that the View can
    // access the quote record fetched in the handler.
    public Quote Quote { get; set; } = default!;

    // ...

    // public IActionResult OnGet(int id) => Page(); <- This gets removed.

    // This is our new GET request handler.
    public async Task<IActionResult> OnGetAsync(int id)
    {
        var quote = await FindQuote(id);

        // Return a 404 if the quote doesn't exist.
        if (quote == null)
        {
            return NotFound();
        }

        // Don't forget to store the quote in the property.
        Quote = quote;

        return Page();
    }

    // ...

    // We also need to update the query so that the image records are also
    // fetched, along with the particular quote we're interested in.
    private async Task<Quote?> FindQuote(int id) =>
        await _context.Quotes
            .Include(m => m.QuoteImages) // <- We need to add this.
            .FirstOrDefaultAsync(m => m.ID == id);
}

// VehicleQuotes.WebApi/Models/QuoteImage.cs

namespace VehicleQuotes.WebApi.Models;

public class QuoteImage
{
    // ...

    // Taking advantage of the fact that we know that the image files are stored
    // in the wwwroot/uploads directory, we can construct a URL that can be used
    // in the src attribute of <img> elements.
    public string Url => $"~/uploads/{FileName}";
}

<!-- VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml -->

<h4>Existing Images</h4>
<hr />

<div class="row mb-4">
    @foreach (var image in Model.Quote.QuoteImages)
    {
        <div class="col-3">
            <img
                src="@image.Url"
                asp-append-version="true"
                alt="Quote image"
                class="mx-auto d-block w-75"
            />
        </div>
    }
</div>

<!-- VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml -->

<form method="post">
    <button
        type="submit"
        asp-page-handler="DeleteImage"
        asp-route-imageId="@image.ID"
        class="btn btn-outline-danger mx-auto d-block"
    >
        Delete
    </button>
</form>

// VehicleQuotes.AdminPortal/Pages/Quotes/Edit.cshtml.cs

// This is the handler method. Its name matches the asp-page-handler attribute
// on the button that triggers the form submission. The id parameter comes from
// the URL route (i.e. quotes/edit/{id}). The imageId parameter comes from the
// asp-route-imageId attribute in the form's submit button.
public async Task<IActionResult> OnPostDeleteImageAsync(int id, int imageId)
{
    // Find the quote record by id...
    var quote = await FindQuote(id);

    // ...and return a 404 if no quote is found.
    if (quote == null)
    {
        return NotFound();
    }

    // Get the image referenced by imageId. That is, the one for which the
    // delete button was pressed.
    var imageToDelete = quote.QuoteImages.FirstOrDefault(i => i.ID == imageId);

    // Again, return a 404 if no such image record exists.
    if (imageToDelete == null)
    {
        return NotFound();
    }

    // If all goes well, we delete the image file...
    DeleteImageFile(imageToDelete.FileName);
    // ...and also delete the corresponding database record.
    _context.QuoteImages.Remove(imageToDelete);
    await _context.SaveChangesAsync();

    // And finally reload the page.
    return RedirectToPage("./Edit", new { Id = id });
}

// This method uses the typical .NET library features for deleting a file.
private void DeleteImageFile(string fileName)
{
    var filePath = Path.Combine(_imagesPath, fileName);
    System.IO.File.Delete(filePath);
}