ba-input-upload

A form field for uploading files via dragging & dropping or click to upload

<ba-input-upload label="File upload" name="fileUpload" hint-text="Please upload your identification" file-types="jpeg,png,pdf" max-file-size-mb="5" required></ba-input-upload>

The types of files that ba-input-upload can support is configured via the file-types prop. This prop takes a comma separated list of file types, that are then used to validate against.

For example if the passed in value was jpg,png,pdf then ba-input-upload would validate any passed in files to those file types.

Please note that jpg will only validate for .jpg files and not .jpeg files. If both are allowed please add both to the file-types prop.

Always use the label attribute to give a meaningful label to the field.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`allowMultipleUploads`	`allow-multiple-uploads`	Whether to allow multiple uploads at the same time	`boolean \| undefined`	`false`
`fileLimit`	`file-limit`	The maximum amount of files that can be uploaded	`number \| undefined`	`undefined`
`fileTypes`	`file-types`	A comma separated list of file types that can be uploaded	`string \| undefined`	`undefined`
`hintText`	`hint-text`	Hint text to show above the input	`string \| undefined`	`undefined`
`invalid`	`invalid`	Whether the input is invalid	`boolean \| undefined`	`false`
`label`(required)	`label`	A label for the input	`string`	`undefined`
`maxFileSizeMb`	`max-file-size-mb`	The maximum size a file can be	`string \| undefined`	`undefined`
`required`	`required`	Whether the input is required	`boolean \| undefined`	`false`

Events

Event	Description	Type
`baChange`	Emitted when the value has changed.	`CustomEvent<InputUploadChangeEventDetail>`

Methods

`isValid() => Promise<boolean>`

An exposed method for triggering the inputs required validation

`reset() => Promise<void>`

Resets the input back to its initial value

Returns

Type: Promise<void>

Slots

Slot	Description	Permitted elements
Unnamed slot	ba-file elements will be rendered here	`<ba‑input‑upload>`
`"error"`	Element will be rendered in the error slot	`<span>`
`"error-required"`	Element will be rendered in the error-required slot	`<span>`
`"error-upload-limit"`	Element will be rendered in the error-upload-limit slot	`<span>`
`"error-file-size"`	Element will be rendered in the error-file-size slot	`<span>`
`"error-file-type"`	Element will be rendered in the error-file-type slot	`<span>`
`"error-duplicate-file"`	Element will be rendered in the error-duplicate-file slot	`<span>`

Parent components

ba-input-upload can be slotted into:

Usage

Basic usage

A simple file upload

<ba-input-upload label="Label text" name="input-upload" required></ba-input-upload>

Help text

It is sometimes useful to add hint text.

A file upload that has hint text

<ba-input-upload label="Label text" name="input-upload" hint-text="Custom hint text" required></ba-input-upload>

Validation

File types

You can specify the file types which are allowed to be uploaded

Specifying a list of file types

<ba-input-upload name="file-upload" label="File upload" file-types="jpeg,png,pdf"></ba-input-upload>

Max file size

You can specify the maximum size a file can be

Specifying a maximum file size

<ba-input-upload name="file-upload" label="File upload" max-file-size-mb="5"></ba-input-upload>

Maximum number of files

You can specify the maximum number of files that can be uploaded

Specifying a maximum number of files

<ba-input-upload name="file-upload" label="File upload" file-limit="5"></ba-input-upload>

Required

You can set the field to be required

Setting the field as required

<ba-input-upload name="file-upload" label="File upload" required></ba-input-upload>

Custom Error messages

BAgel provides error messages with translations for:

Required
Maximum upload limit
Maximum file size
Allowed file types

These can be customised using slots.

Specifying custom validation errors

<ba-input-upload name="file-upload" label="File upload" required min-length="2" max-length="6">
  <p slot="error-required">Custom required error</p>
  <p slot="error-upload-limit">Custom upload limit error</p>
  <p slot="error-file-size">Custom file size error</p>
  <p slot="error-file-type">Custom file type error</p>
</ba-input-upload>

Override all error messages

You can override all error messages with the error slot.

Overriding all error messages

<ba-input-upload name="file-upload" label="File upload" required min-length="2" max-length="6">
  <p slot="error">This will override all error messages</p>
  <p slot="error-required">Custom required error</p>
  <p slot="error-upload-limit">Custom upload limit error</p>
  <p slot="error-file-size">Custom file size error</p>
  <p slot="error-file-type">Custom file type error</p>
</ba-input-upload>

Custom validation

You can provide your own custom validation using events and props.

Custom validation

<ba-input-upload name="file-upload" label="File upload" required>
  <p slot="error">Custom error message</p>
</ba-input-upload>

<script>
  const fileUpload = document.querySelector('ba-input-upload');
  fileUpload.addEventListener('baChange', (e) => {
    const value = e.detail.value;

    // Do your custom validation here.
    //
    //
    // Then set the input to invalid
    fileUpload.setAttribute('invalid')
  })
</script>

Showing upload status with `<ba-file>` component

Once a valid file has been selected by the user <ba-input-upload> will add a new <ba-file> component as a child to show the files status.

Simply listen for the change event on <ba-input-upload> to get the files details, then update the props on the valid <ba-file> component.

Properties & Attributes

Property	Attribute	Description	Type	Default
`name`	`name`	The name of the file	`string \| undefined`	`undefined`
`uploading`	`uploading`	Whether the file is being uploaded	`boolean`	`false`

Events

Event	Description	Type
`baFileRemove`	Emitted when the file gets removed.	`CustomEvent<any>`

Showing the upload status via the ba-file component

<ba-input-upload
  label="File upload"
  name="fileUpload"
  hint-text="Please upload your identification"
  file-types="jpeg,png,pdf"
  max-file-size-mb="5"
  required>
</ba-input-upload>

<script>
  const fileUpload = document.querySelector('ba-input-upload')

  fileUpload.addEventListener('baChange', (e) => {
    const element = document.querySelector('ba-file[id="' + e.detail.id +'"]')

    if (element && e.detail.valid) {
      element.setAttribute('uploading', '')

      // A timeout has been set to simulate a file being uploaded
      setTimeout(() => {
        element.removeAttribute('uploading')
      }, 2000)
    }
  })
</script>