lbry-desktop/ui/js/component/file-selector.js

import React from "react";

const { remote } = require("electron");
class FileSelector extends React.Component {
  static propTypes = {
    type: React.PropTypes.oneOf(["file", "directory"]),
    initPath: React.PropTypes.string,
    onFileChosen: React.PropTypes.func,
  };

  static defaultProps = {
    type: "file",
  };

  componentWillMount() {
    this.setState({
      path: this.props.initPath || null,
    });
  }

  handleButtonClick() {
    remote.dialog.showOpenDialog(
      {
        properties: [this.props.type == "file" ? "openFile" : "openDirectory"],
      },
      paths => {
        if (!paths) {
          // User hit cancel, so do nothing
          return;
        }

        const path = paths[0];
        this.setState({
          path: path,
        });
        if (this.props.onFileChosen) {
          this.props.onFileChosen(path);
        }
      }
    );
  }

  render() {
    return (
      <div className="file-selector">
        <button
          type="button"
          className="file-selector__choose-button"
          onClick={() => this.handleButtonClick()}
        >
          {this.props.type == "file"
            ? __("Choose File")
            : __("Choose Directory")}
        </button>
        {" "}
        <span className="file-selector__path">
          {this.state.path ? this.state.path : __("No File Chosen")}
        </span>
      </div>
    );
  }
}

export default FileSelector;