dbl-components/src/js/forms/fields/file-button-field.js

Framework based on bootstrap 5

import React, { createRef } from "react";

import DropFileField from "./drop-file-field";

export default class FileButtonField extends DropFileField {

  static jsClass = 'FileButtonField';
  static defaultProps = {
    ...DropFileField.defaultProps,
    labelClasses: 'mb-0'
  }

  tag = 'span';

  constructor(props) {
    super(props);
    this.state.localClasses = 'btn position-relative';
  }

  content(children = this.props.children) {
    const { value } = this.state;
    return React.createElement(React.Fragment, {},
      this.labelNode,
      children && (!value ? children[0] : children[1]),
      this.inputNode
    );
  }

  render() {
    return React.createElement(React.Fragment, {},
      super.render(),
      this.errorMessageNode
    );
  }

}