# Props

Prop name	Type	Required	Default value
state	String	No	"initial"
maxFileSize	Number	No	1024 * 1024 * 100 (100MB)
multiple	Boolean	No	false
validateFn	Function	No	() => true
percentComplete	Number	No	0
valid	Boolean	No	false
instructions	String	No	"Choose a file"
actionLabel	String	No	"Go"
inProgressMsg	String	No	"Working on it..."
successMsg	String	No	"Everything went smoothly"
generalErrorMsg	String	No	"Something went wrong. Please try again."
filesizeErrorMsg	String	No	"Your file is too large. Please choose another file."
multifileErrorMsg	String	No	"Only one file is allowed"
validationErrorMsg	String	No	"Your file contained errors. Please choose another file"

# state

The current state of the file selection process. Supported values are "initial", "selected", "inProgress", "success" and "error".

# multiple

Whether multiple files are allowed to be selected.

# maxFileSize

The maximum filesize in bytes. If a file is selected that exceeds this size, a message with the value of the filesizeErrorMsg will be shown.

# validateFn

A function that will be executed. The argument supplied to the function will be the array of files selected. If a single file is selected, that file can be accessed internally as files[0]. An example usage of validateFn to validate the filetype is shown below:

<NioFileChooser validateFn="validateFile" ...></NioFileChooser>

export default {
  data: () => ({
    extensionList = ['jpg', 'gif', 'bmp', 'png'];
  }),	
  methods: {
    isValidFileType(fileName) {
      return this.extensionList.indexOf(fileName.split('.').pop()) > -1;
    },
    validateFile(files) {
      if (!this.isValidFileType(files[0])) {
        return false
      }
      return true
    }
  }
}

# percentComplete

The current progress of the execution. Will show the progress in an indicator when state = 'inProgress'.

# valid

Whether the currently selected file is valid. If set to false, a message with the value of the validationErrorMsg will be shown.

# instructions

The instructions shown to the user when state = "initial".

# actionLabel

The button text displayed to initiate file processing. The parent component will receive an actionClicked event, at which point state is set to "inProgress", and the parent component can begin processing the file(s), upating percentComplete as desired.

# inProgressMsg

The message to be displyed when state = "inProgress".

# successMsg

The message to be displyed when state = "success".

# successMsg

The message to be displyed when state = "success".

# generalErrorMsg

The message to be displyed when state = "error" and there was not a validation, fileSize, or multifile error detected by the component.

# filesizeErrorMessage

A message to be displayed when the size (in bytes) of the selected file is greater than maxFileSize.

# multifileErrorMessage

A message to be displayed when mutiple files are selected, but mutifile is set to false.

# validationErrorMessage

A message to displayed when the result of validateFn(files) is returned as false.

← Divider Events →