Upload Button

<UploadButton /> Component

The UploadButton component renders a button for uploading files. It provides visual feedback during the upload process and supports different styling options. The component can be customized with icons, button text, and additional styling. It also handles file uploads by displaying an upload indicator or the button's icon based on the upload status.

Usage

<UploadButton @accept="jpg,png,svg,gif" @onFileAdded={{this.onFileAdded}} />

Handling the upload:

@action onFileAdded(file) {
    this.fetch.uploadFile.perform(
        file,
        {
            path: 'uploads',
            type: 'image',
        },
        (uploadedFile) => {
            // Do something with uploaded file
        },
        () => {
            // Handle upload failure
            file.queue.remove(file);
        }
    );
}

Properties

Property	Type	Description
name	String	The name attribute for the file input.
accept	String	Specifies the types of files that the file input should accept.
onFileAdded	Function	Function called when a file is added to the upload queue.
labelClass	String	CSS class to apply to the label element within the button.
type	String	Specifies the button type. Defaults to 'default'.
size	String	Size of the button. Defaults to 'sm'.
icon	String	Icon to display on the button. Defaults to "image".
iconClass	String	CSS class for the icon.
buttonText	String	Text to display on the button when no file is being uploaded.
hideButtonText	Boolean	If true, hides the button text.
outline	Boolean	If true, applies an outline style to the button.