FileUploader

Properties

• buttonTitle (string):
  Text for the file selection button. Default: 'Select file...'.
• buttonPrimary (boolean):
  Determines whether the file selection button will be styled as primary.
• multiple (boolean):
  Allows multiple files to be uploaded at once.
• accept (string):
  Format of accepted files, e.g., 'image/*', 'audio/*', or specific extensions (e.g., '.pdf').
• name (string):
  Name for the file upload field. Can be used for form handling.
• value (File[] | File | null):
  Current value of the file upload field. Can be an array of files or a single file.
• onInput *(function(value: File[] | File | null)):
  Handler function called when the uploaded files change.
• onUploadedFileClick *(function(file: File)):
  Handler that is called when clicking on an uploaded file.

Important Points

• convertValue:
  Converts the value into an array of files for display.
• removeFile:
  Removes a file from the list of uploaded files.
• onFileInputHandler:
  Handler for changes in the <input type="file"> field. Processes selected files and passes them to the component.
• checkAccept:
  Checks if the file matches the specified types (accept). If no type is specified, the file is accepted.
• uploadFile:
  Sends the file to the server and tracks the upload progress. After successful upload, adds the file to the list of uploaded files.

Components

• FileUploaderItem:
  A separate component for displaying an uploaded file. Displays an image preview or file name, as well as a button to remove the file.
• FileUploaderUploadingItem:
  A separate component for displaying an uploading file, including showing the upload progress.

Helper Functions

humanFileSize:
Formats the file size into a human-readable format (e.g., "1.2 MB"). humanFileType:
Returns a human-readable name for the file type (e.g., 'image' for image/*).