<commit_before>import React, { Component, PropTypes } from 'react'
import Dropzone from 'react-dropzone'
import {Label, Grid, List, Segment} from 'semantic-ui-react'

const GridRow = Grid.Row
const GridColumn = Grid.Column
const ListItem = List.Item

class Upload extends Component {
  constructor (props) {
    super(props)
    this.state = {
      fileType: '',
      fileSize: null,
      fileName: ''
    }
  }

  onDrop = (acceptedFiles) => {
    this.props.uploadCallback(acceptedFiles)
    this.setState({
      fileSize: acceptedFiles[0].size,
      fileType: acceptedFiles[0].type,
      fileName: acceptedFiles[0].name
    })
  }

  render () {
    return (
      <Grid columns={2} divided>
        <GridRow>
          <GridColumn>
            <div style={{width: '100%'}}>
              <Dropzone onDrop={this.onDrop} multiple={false} >
                <div>Try dropping audio file here, or click to select file to upload.</div>
              </Dropzone>
            </div>
          </GridColumn>
          <GridColumn>
            <Segment padded>
              <Label attached='top'>DETAILS</Label>
              <List>
                <ListItem>{this.state.fileName}</ListItem>
                <ListItem>{this.state.fileType}</ListItem>
                <ListItem>{this.state.fileSize}</ListItem>
              </List>
            </Segment>
          </GridColumn>
        </GridRow>
      </Grid>

    )
  }
}

Upload.propTypes = {

}

export default Upload
<commit_msg>fix some code<commit_after>import React, { Component, PropTypes } from 'react'
import Dropzone from 'react-dropzone'
import {Label, Grid, List, Segment} from 'semantic-ui-react'

const GridRow = Grid.Row
const GridColumn = Grid.Column
const ListItem = List.Item

class Upload extends Component {
  constructor (props) {
    super(props)
    this.state = {
      fileType: '',
      fileSize: null,
      fileName: ''
    }
  }

  onDrop = (acceptedFiles) => {
    this.props.uploadCallback(acceptedFiles)
    this.setState({
      fileSize: acceptedFiles[0].size,
      fileType: acceptedFiles[0].type,
      fileName: acceptedFiles[0].name
    })
  }

  render () {
    return (
      <Grid columns={2} divided>
        <GridRow>
          <GridColumn>
            <div style={{width: '100%'}}>
              <Dropzone onDrop={this.onDrop} multiple={false} >
                <div>Try dropping audio file here, or click to select file to upload.</div>
              </Dropzone>
            </div>
          </GridColumn>
          <GridColumn>
            <Segment padded>
              <Label attached='top'>DETAILS</Label>
              <List>
                <ListItem>{this.state.fileName}</ListItem>
                <ListItem>{this.state.fileType}</ListItem>
                <ListItem>{this.state.fileSize}</ListItem>
              </List>
            </Segment>
          </GridColumn>
        </GridRow>
      </Grid>

    )
  }
}

Upload.propTypes = {
  uploadCallback: PropTypes.func
}

export default Upload

{'fraction_non_alphanumeric': 0.12649800266311584, 'fraction_numerical': 0.004660452729693742, 'mean_word_length': 2.0140421263791373, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4246685', 'n_tokens_mistral': 896, 'n_tokens_neox': 888, 'n_words': 192}