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;