File Upload

Description

A component that lets you choose a specific file/s you want to upload.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-inputs --save

File Upload Single

Configuration

import { InputSelectionHandler} from 'empower-inputs';

let [formElement, setFormElement] = useState({
   sampleFile: {
      id: "sampleFile",
      type: 'file',
      selected: [],
      accept: ".png,.pdf",
      disabled: false,
    }
});

..............

return (
    <>
        <h4>FILE SINGLE</h4>
        <InputSelectionHandler
          config={formElement.sampleFile}
          customClass="file-custom-class"
          hasChips={true}
          onChanged={(e) => inputChangedHandler(e, 'sampleFile')}
        />
    </>
  )

File Upload Multiple

Configuration

import { InputSelectionHandler} from 'empower-inputs';

let [formElement, setFormElement] = useState({
    sampleFileMultiple: {
      id: "sampleFileMultiple",
      type: 'file',
      selected: [],
      accept: ".png,.pdf",
      disabled: false,
      multiple: true
    }
});

..............

return (
    <>
      <h4>FILE MULTIPLE</h4>
      <InputSelectionHandler
        config={formElement.sampleFileMultiple}
        customClass="file-custom-class"
        hasChips={true}
        onChanged={(e) => inputChangedHandler(e, 'sampleFileMultiple')}
      />
    </>
  )

Properties

Parent Parameter	Sub Parameter	Data Type	Constraint

Parent Parameter	Sub Parameter	Data Type	Constraint
config		JSON Object	Required
	id	String	Required
	type	String	Required
	label	String	Optional
	selected	File	Required
	placeholder	String	Optional
	required	Boolean	Optional
	disabled	Boolean	Optional
	multiple	Boolean	Optional
hasChips		Boolean	Optional
customClass		String	Optional
onChanged		Event Method	Required

References

Repository Link: https://bitbucket.org/empowerteams/empower-inputs

NPM Package: npm: empower-inputs

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git

Front End