message: Add file decorator for file question in react
diff: @@ -41,15 +41,15 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
  if (!this.question) return null;
  var preview = this.renderPreview();
  var fileInput = null;
  + var fileDecorator = null;
  var clearButton = null;
  - var displayInput = null;
  - if (!this.isDisplayMode) {
  fileInput = (
  <input
  + disabled={this.isDisplayMode}
  className={this.question.cssClasses.fileInput}
  id={this.question.inputId}
  type="file"
  - onChange={this.handleOnChange}
  + onChange={!this.isDisplayMode ? this.handleOnChange : null}
  aria-required={this.question.isRequired}
  aria-label={this.question.locTitle.renderedHtml}
  multiple={this.question.allowMultiple}
  @@ -57,7 +57,25 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
  accept={this.question.acceptedTypes}
  />
  );
  - if (!!this.question.value) {
  + fileDecorator = (
  + <div className={this.question.cssClasses.fileDecorator}>
  + <label
  + className={
  + this.question.cssClasses.chooseFile +
  + (this.isDisplayMode ? " " + this.question.cssClasses.disabled : "")
  + }
  + htmlFor={this.question.inputId}
  + >
  + {this.question.chooseButtonCaption}
  + </label>
  + {this.question.isDisplayMode || !!this.question.value || (
  + <span className={this.question.cssClasses.noFileChosen}>
  + {this.question.noFileChosenCaption}
  + </span>
  + )}
  + </div>
  + );
  + if (!!this.question.value && !this.isDisplayMode) {
  clearButton = (
  <button
  type="button"
  @@ -68,26 +86,11 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
  </button>
  );
  }
  - } else {
  - displayInput = (
  - <input
  - disabled={true}
  - className={this.question.cssClasses.fileInput}
  - id={this.question.inputId}
  - type="file"
  - aria-required={this.question.isRequired}
  - aria-label={this.question.locTitle.renderedHtml}
  - multiple={this.question.allowMultiple}
  - title={this.question.inputTitle}
  - accept={this.question.acceptedTypes}
  - />
  - );
  - }
  return (
  <div className={this.question.cssClasses.root}>
  {fileInput}
  + {fileDecorator}
  {clearButton}
  - {displayInput}
  {preview}
  </div>
  );
  