FileUploadInput

Interactive Demo

Click to upload

or drag and drop here JPG, PNG or PDF (10 MB max)

vue

<script setup>
import { FileUploadInput } from '@yellowcard/b2b-design-system';
</script>

<template>
  <FileUploadInput />
</template>

Prop	Type	Default	Description
`maxFileSize`	`number`	`10`	in MB. Default is 10
`fileLoading`	`number`	`-1`	The index of the file to display in its loading state e.g. when deleting
`errorMessage`	`string`	`''`	Externally supplied error message. Takes precedence over internal validation errors.
`label`	`string`	`'Click to upload'`
`description`	`string`	—
`files`	`FileInfo[]`	`[]`
`acceptedTypes`	`string[]`	`['image/jpeg', 'image/png', 'application/pdf']`
`multiple`	`boolean`	`true`
`allowRemove`	`boolean`	`true`
`disabled`	`boolean`	`false`
`loading`	`boolean`	`false`