Biofarma | Bind UI

File Upload

File Upload is a component that enables users to upload single or multiple files with validation, progress tracking, and customization options.

Type	Resource
Design	Figma
Mobile	Web Storybook
Code	Gitlab

Overview

File Upload Preview

Usage

import id.co.biofarma.binduiandroid.components.single_file_upload.FileUpload

FileUpload(
    selectedFiles = remember { mutableStateOf(listOf()) },
    onUploadChange = { files -> 
        // Handle file changes
    },
    label = "Upload Document"
)

Examples

Single vs Multiple Upload

Choose between single file or multiple file upload modes.

File Upload Types

Size Variations

The component supports different sizes to match your design needs.

File Upload Sizes

Progress Tracking

Show upload progress with a built-in progress bar.

File Upload Single Upload Progress

States

The component supports various states including error and disabled.

File Upload State

Props

Props	Required	Default	Type	Description
id	false	""	`String`	Unique identifier for the component
selectedFiles	true	`mutableStateOf(listOf())`	`MutableState<List<File>>`	Currently selected files
onUploadChange	true	-	`(List<File>) -> Unit`	Callback when files are selected
disabled	false	`false`	`Boolean`	Disables the upload functionality
style	false	`Modifier`	`Modifier`	Custom styles for the component
size	false	`"sm"`	`String`	Component size: “sm”, “md”, “lg”
allowedFileTypes	false	`["jpg", "png", "pdf"]`	`List<String>`	Allowed file extensions
maxFileSizeInMB	false	`5`	`Byte`	Maximum allowed file size
showProgress	false	`false`	`MutableState<Boolean>`	Controls progress bar visibility
currentProgress	false	`0`	`MutableIntState`	Upload progress percentage
remainingTimeInSec	false	`0`	`MutableIntState`	Remaining upload time
helperText	false	`""`	`String`	Helper text below component
label	false	`""`	`String`	Label above component
isError	false	`false`	`MutableState<Boolean>`	Error state flag
errorText	false	`""`	`MutableState<String>`	Error message text
isMultiple	false	`false`	`Boolean`	Enable multiple file selection
onDelete	false	`{}`	`(File) -> Unit`	Callback when file is deleted

Guidelines

File Types: Use allowedFileTypes to restrict uploads to specific formats.
Size Limits: Set appropriate maxFileSizeInMB based on your requirements.
Progress: For large files, enable showProgress to provide upload feedback.
Error Handling: Use isError and errorText for validation feedback.
Labels: Provide clear label and helperText for better user guidance.

Drawer Infinite Scroll