FileUpload

Default

Svelte code

<script>
	import { FileUpload } from '@danboscaro/govuk-svelte'
</script>

<FileUpload {...{
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  }
}} />

With hint text

Svelte code

<script>
	import { FileUpload } from '@danboscaro/govuk-svelte'
</script>

<FileUpload {...{
  id: "file-upload-2",
  name: "file-upload-2",
  label: {
    text: "Upload your photo"
  },
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
  }
}} />

With error message and hint

Svelte code

<script>
	import { FileUpload } from '@danboscaro/govuk-svelte'
</script>

<FileUpload {...{
  id: "file-upload-3",
  name: "file-upload-3",
  label: {
    text: "Upload a file"
  },
  hint: {
    text: "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
  },
  errorMessage: {
    text: "Error message goes here"
  }
}} />

With label as page heading

Svelte code

<script>
	import { FileUpload } from '@danboscaro/govuk-svelte'
</script>

<FileUpload {...{
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file",
    classes: "govuk-label--l",
    isPageHeading: true
  }
}} />

With optional formGroup classes

Svelte code

<script>
	import { FileUpload } from '@danboscaro/govuk-svelte'
</script>

<FileUpload {...{
  id: "file-upload-1",
  name: "file-upload-1",
  label: {
    text: "Upload a file"
  },
  formGroup: {
    classes: "extra-class"
  }
}} />