Creates a file upload component that more closely resembles the normal inputs.

This is used as HTML does not allow styling on file uploads, so wrapping and hiding the button is the only solution. This is mostly used for single file uploads (though there is an option for multiple here). Most apps use dropzone for multiple file uploads, click here for more details.

Basic Usage:

<FwFileUpload @accept='.csv' @update={{action (mut file)}} />
Show:
getFileName
(
  • files
)

Gets the filename from a list of files

Parameters:

  • files Array | File

    list of files or single file if not multiple

Returns:

Filename to display

normalizeFiles
(
  • files
)
File | Array

Normalizes the files to a practical array structure

Parameters:

  • files FileList

    JavaScript filelist object

Returns:

File | Array:

File, or array of files if multiple

_filename

String private

File description from upload

accept

String

Valid file extensions, for multiple separate with commas. See the HTML property for more information.


Default: null

maxDisplay

Number

Maximum number of filenames to display in the input field


Default: 3

multiple

Boolean

If true, makes this a multiple upload.


Default: false

noFileText

String

Text to display when no file is set.


Default: 'No file chosen'

update

Action

Called when a file is uploaded. This is the function that actually does whatever is necessary with the file (aka, this is a mandatory property). Passed in as an action

Sub-properties:

  • type Array | File

    File uploaded. If multiple, will be an array of files