spark/com.adevinta.spark.components.fileupload/FileUpload/Button

Button

fun Button(onResult: (ImmutableList<UploadedFile>) -> Unit, label: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, type: FileUploadType = FileUploadType.File(), maxFiles: Int? = null, title: String? = null, directory: PlatformFile? = null, dialogSettings: FileKitDialogSettings = FileKitDialogSettings.createDefault(), enabled: Boolean = true, onClickLabel: String? = null, buttonContent: @Composable (onClick: () -> Unit) -> Unit = { onClick -> ButtonFilled( modifier = Modifier .fillMaxWidth() .ifNotNull(onClickLabel) { semantics { onClick(label = onClickLabel, action = null) } }, onClick = onClick, text = label, intent = ButtonIntent.Support, enabled = enabled, ) })(source)

High level file upload component for multiple file selection.

This component provides a button to trigger multiple file selection. To display selected files, manage state yourself and use PreviewFile or FileUploadList.

Parameters

onResult

Callback invoked when files are selected

label

Text label for the default button

modifier

Modifier to be applied to the button

size

The size of the button. Only applies when using the default buttonContent.

icon

The optional icon to be displayed at the start or the end of the button container. Only applies when using the default buttonContent.

iconSide

If an icon is added, you can configure the side where is should be displayed, at the start or end of the button. Only applies when using the default buttonContent.

type

Type of files to select (image, video, file, etc.)

maxFiles

Maximum number of files that can be selected. If null, no limit.

title

Optional title for the file picker dialog

Samples

var selectedFile by rememberSaveable { mutableStateOf<UploadedFile?>(null) }

Column(modifier = Modifier.fillMaxWidth()) {
    FileUpload.ButtonSingleSelect(
        onResult = { file -> selectedFile = file },
        label = "Select a file",
        modifier = Modifier.fillMaxWidth(),
    )

    VerticalSpacer(16.dp)

    selectedFile?.let { file ->
        PreviewFile(
            file = file,
            onClear = { selectedFile = null },
            modifier = Modifier.fillMaxWidth(),
            onClick = { FileUploadDefaults.openFile(file) },
        )
    }
}

var selectedFiles by remember {
    mutableStateOf<ImmutableSet<UploadedFile>>(persistentSetOf())
}

Column(modifier = Modifier.fillMaxWidth()) {
    FileUpload.Button(
        onResult = { files ->
            selectedFiles = selectedFiles.plus(files).toImmutableSet()
        },
        label = "Add files",
        modifier = Modifier.fillMaxWidth(),
    )

    VerticalSpacer(16.dp)

    if (selectedFiles.isNotEmpty()) {
        FileUploadList(
            files = selectedFiles.toImmutableList(),
            onClearFile = { file ->
                selectedFiles = selectedFiles.filterNot { it == file }.toImmutableSet()
            },
            onClick = { file -> FileUploadDefaults.openFile(file) },
        )
    }
}