Skip to main content
Design System in C#

Beta This is a new service.

File upload

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

Open this example in a new tab 

@using GovUkDesignSystemDotNet

@await Html.GovUkFileUpload(new FileUploadViewModel
{
    Name = "your-csv-file",
    Label = new LabelViewModel
    {
        HtmlOrText = new HtmlOrText("Upload a CSV file")
    },
    Javascript = true
})

Options

Options for FileUploadViewModel
Name Type Description
Name string Required. The name of the input, which is submitted with the form data.
Id string The ID of the input. Defaults to the value of Name.
Disabled bool If true, file input will be disabled.
Multiple bool If true, a user may select multiple files at the same time. The exact mechanism to do this differs depending on operating system.
DescribedBy List<string> One or more element IDs to add to the input aria-describedby attribute, used to provide additional descriptive information for screenreader users.
Label LabelViewModel Required. The label used by the file upload component. See options for LabelViewModel
Hint HintViewModel Can be used to add a hint to the file upload component. See options for HintViewModel
ErrorMessage ErrorMessageViewModel Can be used to add an error message to the file upload component. The error message component will not display if ErrorMessage is null. See options for ErrorMessageViewModel
FormGroup FormGroupViewModel Additional options for the form group containing the file upload component. See options for FormGroupViewModel
Javascript bool Can be used to enable JavaScript enhancements for the component.
ChooseFilesButtonText string The text of the button that opens the file picker. Default is "Choose file". If Javascript is not true, this option will be ignored.
DropInstructionText string The text informing users they can drop files. Default is "or drop file". If Javascript is not true, this option will be ignored.
MultipleFilesChosenText PluralisationOptions The text displayed when multiple files have been chosen by the user. The component will replace the %{count} placeholder with the number of files selected. Design System pluralisation rules apply to this macro option. See options for PluralisationOptions If Javascript is not true, this option will be ignored.
NoFileChosenText string The text displayed when no file has been chosen by the user. Default is "No file chosen". If Javascript is not true, this option will be ignored.
EnteredDropZoneText string The text announced by assistive technology when user drags files and enters the drop zone. Default is "Entered drop zone". If Javascript is not true, this option will be ignored.
LeftDropZoneText string The text announced by assistive technology when user drags files and leaves the drop zone without dropping. Default is "Left drop zone". If Javascript is not true, this option will be ignored.
Classes List<string> Classes to add to the file upload component.
Attributes Dictionary<string, string> HTML attributes (for example, data attributes) to add to the file upload component.
Options for FormGroupViewModel
Name Type Description
Classes List<string> Classes to add to the form group (for example to show error state for the whole group).
Attributes Dictionary<string, string> HTML attributes (for example data attributes) to add to the form group.
BeforeInput HtmlOrText HTML or text to add before the input used by the file upload component.
AfterInput HtmlOrText HTML or text to add after the input used by the file upload component
Options for PluralisationOptions
Name Type
Zero string
One string
Two string
Few string
Many string
Other string