Contents

import React from "react";
import PropTypes from "prop-types";

export default class FileUploadButton extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.handleChange = this.handleChange.bind(this);
    this.triggerDialog = this.triggerDialog.bind(this);
  }

  handleChange(evt) {
    let fileList = evt.target.files;
    let files = [];
    for (var i = 0; i < fileList.length; i++) {
      files.push(fileList[i]);
    }
    if (files.length > 0) {
      this.props.callback(files);
    }
  }

  render() {
    return (
      <div className="upload-button">
        <span>
          Drag and drop {this.props.type || "file"}
          {this.props.multiple && "s"} here, or
          {this.props.multiline && <br />}
          <button onClick={this.triggerDialog}>
            choose a file
          </button>
        </span>
        <input type="file"
               onChange={this.handleChange}
               ref={this.inputRef}
               style={{ display: "none" }}
               multiple={this.props.multiple || false} />
      </div>
    );
  }

  triggerDialog(evt) {
    evt.preventDefault();
    this.inputRef.current.click();
  }
}

FileUploadButton.propTypes = {
  callback: PropTypes.func,
  type: PropTypes.string,
  multiple: PropTypes.bool,
  multiline: PropTypes.bool
};

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
pages_core-3.8.1	app/javascript/components/FileUploadButton.jsx
pages_core-3.8.0	app/javascript/components/FileUploadButton.jsx