FileUpload

Showcase

Enter somethingDrop a file or click

This is a helper message

<LnxFileUpload
    @upload="..." <-- When a file is added to the input
    @delete="..." <-- When a file needs to be removed
>
    Enter something

    <template #error>
        This is an error message
    </template>

    <template #helper>
        This is a helper message
    </template>
</LnxFileUpload>

Props

files UploadedFile[]When a file is uploaded, the url to it Default value: undefined

Add values to the array by separating them with commas.

isUploading booleanWhen uploading a file, it is disabled and shows a different content Default value: false

isLoading booleanWhen loading, it is disabled and shows a different content Default value: false

hasError booleanIndicates if it should show the error slot Default value: false

customValidity stringThe error message of the input. It is the default value for the `error` slot Default value: undefined

Try enabling the "hasError" prop and hitting "Enter" on the showcased input to see it in action

Types

UploadedFile

export interface UploadedFile {
	url: string;
	name: string;
}