File upload for

Read more about the file upload component on the Gov.UK Design System website

Open this example in a new tab

Model FileUploadForExampleDefaultViewModel.cs

public class FileUploadForExampleDefaultViewModel
{
    public IFormFile YourCsvFile { get; set; }
}

View FileUploadForExampleDefault.cshtml

@using GovUkDesignSystemDotNet
@model FileUploadForExampleDefaultViewModel

<form method="post" enctype="multipart/form-data">
    @await Html.GovUkFileUploadFor(
        m => m.YourCsvFile,
        new FileUploadViewModel
        {
            Label = new LabelViewModel
            {
                HtmlOrText = new HtmlOrText("Upload a CSV file")
            },
            Javascript = true
        })
    
    @await Html.GovUkButton(new ButtonViewModel
    {
        HtmlOrText = new HtmlOrText("Validate")
    })
</form>

Controller

public IActionResult MyActionName(FileUploadForExampleDefaultViewModel viewModel)
{
    if (viewModel.YourCsvFile == null)
    {
        ModelState.AddModelError(nameof(viewModel.YourCsvFile), "Upload a CSV file");
    }

    if (!ModelState.IsValid)
    {
        return View("FileUploadForExampleDefault", viewModel);
    }

    // Do some work with the validated view-model
    return View("InteractiveExampleValidationSuccessful");
}