# XlReactWidgetFileUpload

That element displays the progress of the uploading file. And also the messages in case of successful or failed 
uploads.

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)

### Exports
```
- XlReactWidgetFileUpload
- XlReactWidgetFileUploadComponent
```  

### Playground

* [File Upload Widget](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetFileUpload1)

### Properties

- **disabled** - (boolean) - if true, disables the component, so you can't choose a file for upload.
- **message** - (object) - overrides default warning/error message provided in validator with provided text here.
- **metadata** - (object) - set of parameters of the element, namely:
    - **autoUpload** - if true, starts uploading immediately once file is selected. 
    - **browseButtonType** - (enum of strings) - Possible values 'primary', 'secondary'. It affects how the button 
    will be rendered. 
    - **description** - (string) - text under the input field, in case of error/warning, will be replaced with error/warning message. 
    - **fileNameField** - (string) specifies the field name in the model, which will be representing the file name. 
    By default it is 'fileName'.
    - **label** - (string) - text displayed on the left side from the element. 
    - **required** - (boolean) - if true, forces the user to upload the file. 
    - **requestHeaders** - (object) - adds additional headers to a request. 
    - **uploadUrl** - (string) the url where the file will be uploaded to. By default '/'.
- **model** - (object) - contains the information about the file. There are such fields as:
_lastModified_, _lastModifiedDate_, _name_, _size_, _type_ and _webkitRelativePath_. 
In the code we use only the *name* attribute.
- **onValidityChange** - (func) - triggers once validity is changed.

### Example

```js
import R from 'ramda';

const formData = {fileName: 'my-package1.dar'};

const isImportEnabled = (progressData) => {
    const currentStatus = R.path(['progress', 'currentStatus'], progressData);
    return !currentStatus || currentStatus === 'error';
};

const handleFileChange = (formData) => {
    this.props.updateContext({formData});
};

const handlePristinityChange = (isFormPristine) => {
  ...  
};

const uploadWidgetOptions = {
    browseButtonType: 'secondary',
    description: 'import the package from computer',
    label: 'import the package from computer',
    required: true
};

<XlReactWidgetFileUpload
    disabled={!isImportEnabled(progressData)}
    message={{show: showErrors}}
    metadata={uploadWidgetOptions}
    model={formData}
    onModelChange={handleFileChange}
    onPristinityChange={handlePristinityChange}
/>
```

