ComponentFile upload

21 of 21 upstream examples match. Razor component: <NhsukFileUpload>

Default

Matches upstream

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

Disabled

Matches upstream

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
    disabled="true"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
    Disabled="true"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload",
  "disabled": true
}) }}

Button

Matches upstream

with primary

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
    choose-files-button-class-list="@([

    ])"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
    ChooseFilesButtonClassList="@([

    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload",
  "chooseFilesButtonClassList": []
}) }}

Button

Matches upstream

with small primary

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
    choose-files-button-class-list="@([
        "nhsuk-button--small",
    ])"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
    ChooseFilesButtonClassList="@([
        "nhsuk-button--small",
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload",
  "chooseFilesButtonClassList": [
    "nhsuk-button--small"
  ]
}) }}

Button

Matches upstream

with small secondary

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
    choose-files-button-class-list="@([
        "nhsuk-button--secondary",
        "nhsuk-button--small",
    ])"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
    ChooseFilesButtonClassList="@([
        "nhsuk-button--secondary",
        "nhsuk-button--small",
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload",
  "chooseFilesButtonClassList": [
    "nhsuk-button--secondary",
    "nhsuk-button--small"
  ]
}) }}

Label

Matches upstream

with size S

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "s",
    })"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "s",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "s"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

Label

Matches upstream

with size M

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "m",
    })"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "m",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "m"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

Label

Matches upstream

with size L

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

Label

Matches upstream

with size XL

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "xl",
    })"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "xl",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "xl"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

Label

Matches upstream

with id attribute on

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
        Id = "custom-id",
    })"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
        Id = "custom-id",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l",
    "id": "custom-id"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

To configure in JavaScript

Matches upstream

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="to-configure-in-javascript"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="to-configure-in-javascript"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "to-configure-in-javascript",
  "name": "file-upload"
}) }}

With error message

Matches upstream

Open on its own page (opens in new tab)

Upload a file

The selected file must be a JPG, BMP or TIF

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    error-message="The selected file must be a JPG, BMP or TIF"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "The selected file must be a JPG, BMP or TIF",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "errorMessage": {
    "text": "The selected file must be a JPG, BMP or TIF"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

With error message and hint

Matches upstream

Open on its own page (opens in new tab)

Upload a file

Your photo may be in your Pictures, Photos, Downloads or Desktop folder

The selected file must be a JPG, BMP or TIF

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
    hint="Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
    error-message="The selected file must be a JPG, BMP or TIF"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
    Hint="@(new HintOptions
    {
        Text = "Your photo may be in your Pictures, Photos, Downloads or Desktop folder",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "The selected file must be a JPG, BMP or TIF",
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload",
  "hint": {
    "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
  },
  "errorMessage": {
    "text": "The selected file must be a JPG, BMP or TIF"
  }
}) }}

With error message and hint as strings

Matches upstream

Open on its own page (opens in new tab)

Upload a file

Your photo may be in your Pictures, Photos, Downloads or Desktop folder

The selected file must be a JPG, BMP or TIF

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
    hint="Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
    error-message="The selected file must be a JPG, BMP or TIF"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
    Hint="@("Your photo may be in your Pictures, Photos, Downloads or Desktop folder")"
    ErrorMessage="@("The selected file must be a JPG, BMP or TIF")"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload",
  "hint": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder",
  "errorMessage": "The selected file must be a JPG, BMP or TIF"
}) }}

With error message and hint, without heading

Matches upstream

Open on its own page (opens in new tab)

Upload a file

Your photo may be in your Pictures, Photos, Downloads or Desktop folder

The selected file must be a JPG, BMP or TIF

Razor Pages and MVC

<nhsuk-file-upload
    label="Upload a file"
    id="file-upload"
    name="file-upload"
    hint="Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
    error-message="The selected file must be a JPG, BMP or TIF"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Text = "Upload a file",
    })"
    Id="file-upload"
    Name="file-upload"
    Hint="@(new HintOptions
    {
        Text = "Your photo may be in your Pictures, Photos, Downloads or Desktop folder",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "The selected file must be a JPG, BMP or TIF",
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "text": "Upload a file"
  },
  "id": "file-upload",
  "name": "file-upload",
  "hint": {
    "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
  },
  "errorMessage": {
    "text": "The selected file must be a JPG, BMP or TIF"
  }
}) }}

With error message, without heading

Matches upstream

Open on its own page (opens in new tab)

Upload a fileThe selected file must be a JPG, BMP or TIF

Razor Pages and MVC

<nhsuk-file-upload
    label="Upload a file"
    error-message="The selected file must be a JPG, BMP or TIF"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Text = "Upload a file",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "The selected file must be a JPG, BMP or TIF",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "text": "Upload a file"
  },
  "errorMessage": {
    "text": "The selected file must be a JPG, BMP or TIF"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

With error only

Matches upstream

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    error-message-options="@(true)"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload a file",
        Size = "l",
    })"
    ErrorMessage="@(true)"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload a file",
    "size": "l"
  },
  "errorMessage": true,
  "id": "file-upload",
  "name": "file-upload"
}) }}

With hint

Matches upstream

Open on its own page (opens in new tab)

Upload your photo

Your photo may be in your Pictures, Photos, Downloads or Desktop folder

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload your photo",
        Size = "l",
    })"
    hint="Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
    id="file-upload"
    name="file-upload"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload your photo",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Your photo may be in your Pictures, Photos, Downloads or Desktop folder",
    })"
    Id="file-upload"
    Name="file-upload"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload your photo",
    "size": "l"
  },
  "hint": {
    "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder"
  },
  "id": "file-upload",
  "name": "file-upload"
}) }}

With multiple

Matches upstream

Open on its own page (opens in new tab)

Upload multiple files

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Upload multiple files",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
    multiple="true"
    choose-files-button-text="Choose files"
    drop-instruction-text="or drop files"
    no-file-chosen-text="No files chosen"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Upload multiple files",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
    Multiple="true"
    ChooseFilesButtonText="Choose files"
    DropInstructionText="or drop files"
    NoFileChosenText="No files chosen"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Upload multiple files",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload",
  "multiple": true,
  "chooseFilesButtonText": "Choose files",
  "dropInstructionText": "or drop files",
  "noFileChosenText": "No files chosen"
}) }}

Without heading

Matches upstream

Open on its own page (opens in new tab)

Upload a file

Razor Pages and MVC

<nhsuk-file-upload label="Upload a file" id="file-upload" name="file-upload" />

Blazor

<NhsukFileUpload Label="@("Upload a file")" Id="file-upload" Name="file-upload" />

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": "Upload a file",
  "id": "file-upload",
  "name": "file-upload"
}) }}

With translations

Matches upstream

Open on its own page (opens in new tab)

Llwythwch ffeil i fyny

Razor Pages and MVC

<nhsuk-file-upload
    label-options="@(new LabelOptions
    {
        Heading = "Llwythwch ffeil i fyny",
        Size = "l",
    })"
    id="file-upload"
    name="file-upload"
    multiple="true"
    choose-files-button-text="Dewiswch ffeil"
    drop-instruction-text="neu ollwng ffeil"
    no-file-chosen-text="Dim ffeil wedi'i dewis"
    multiple-files-chosen-text="@(new NhsukAttributes
    {
        ["other"] = "%{count} ffeil wedi'u dewis",
        ["one"] = "%{count} ffeil wedi'i dewis",
    })"
    entered-drop-zone-text="Wedi mynd i mewn i'r parth gollwng"
    left-drop-zone-text="Parth gollwng i'r chwith"
/>

Blazor

<NhsukFileUpload
    Label="@(new LabelOptions
    {
        Heading = "Llwythwch ffeil i fyny",
        Size = "l",
    })"
    Id="file-upload"
    Name="file-upload"
    Multiple="true"
    ChooseFilesButtonText="Dewiswch ffeil"
    DropInstructionText="neu ollwng ffeil"
    NoFileChosenText="Dim ffeil wedi'i dewis"
    MultipleFilesChosenText="@(new NhsukAttributes
    {
        ["other"] = "%{count} ffeil wedi'u dewis",
        ["one"] = "%{count} ffeil wedi'i dewis",
    })"
    EnteredDropZoneText="Wedi mynd i mewn i'r parth gollwng"
    LeftDropZoneText="Parth gollwng i'r chwith"
/>

Nunjucks (upstream)

{% from "nhsuk/components/file-upload/macro.njk" import fileUpload %}

{{ fileUpload({
  "label": {
    "heading": "Llwythwch ffeil i fyny",
    "size": "l"
  },
  "id": "file-upload",
  "name": "file-upload",
  "multiple": true,
  "chooseFilesButtonText": "Dewiswch ffeil",
  "dropInstructionText": "neu ollwng ffeil",
  "noFileChosenText": "Dim ffeil wedi'i dewis",
  "multipleFilesChosenText": {
    "other": "%{count} ffeil wedi'u dewis",
    "one": "%{count} ffeil wedi'i dewis"
  },
  "enteredDropZoneText": "Wedi mynd i mewn i'r parth gollwng",
  "leftDropZoneText": "Parth gollwng i'r chwith"
}) }}