<commit_before>import React, { Component, PropTypes } from 'react'
import {
  Container,
  Segment,
  Grid,
  Form,
  Image,
  Label,
  Card,
  Divider,
  Button
} from 'semantic-ui-react'
import { browserHistory } from 'react-router'
import { uniqBy, union } from 'lodash'
import Zooming from 'zooming'

import { upload } from '../actions/user'
import { search } from '../actions/entities'
import { resetErrorMessageIfNeeded } from '../actions/common'

const propTypes = {
  dispatch: PropTypes.func.isRequired,
  isUploading: PropTypes.bool.isRequired
}

class UploadPage extends Component {
  state = {
    files: [],
    tagSuggestions: [],
    tags: [],
    nsfw: false,
    zooming: new Zooming({
      bgColor: '#000'
    })
  }

  handleInputChange = (event, { value }) => {
    this.setState({
      tags: value
    })
  }

  handleSearchChange = (event, value) => {
    const { dispatch } = this.props

    dispatch(search({ query: value })).then(res => {
      const { value } = res
      const { data } = value
      const newSuggestions = data.map(({ name }) => {
        return { text: name, value: name }
      })

      this.setState({
        tagSuggestions: uniqBy(
          union(this.state.tagSuggestions, newSuggestions),
          'text'
        )
      })
    })
  }

  handleAddTag = (event, { value }) => {
    this.setState({
      tagSuggestions: uniqBy(
        [{ text: value, value }, ...this.state.tagSuggestions],
        'text'
      )
    })
  }

  handleImageChange = e => {
    e.preventDefault()
    const { dispatch } = this.props
    dispatch(resetErrorMessageIfNeeded())

    this.setState({ files: [] })
    const files = e.target.files

    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      let reader = new FileReader()

      reader.onloadend = () => {
        file.preview = reader.result

        this.setState({
          files: [...this.state.files, file]
        })

        this.state.zooming.listen('.img-preview')
      }

      reader.readAsDataURL(file)
    }
  }

  handleRemoveImage = index => {
    this.setState(
      {
        files: this.state.files.filter((_, i) => i !== index)
      },
      () => {
        this.refs.files.length = this.state.files.length
        if (this.state.files.length === 0) {
          this.handleReset()
        }
      }
    )
  }

  handleReset = () => {
    const { dispatch } = this.props
    dispatch(resetErrorMessageIfNeeded())
    this.setState({
      files: [],
      tagSuggestions: [],
      tags: [],
      nsfw: false
    })
  }

  handleInputToggle = (event, data) => {
    const { name, checked } = data

    this.setState({
      [name]: checked
    })
  }

  handleSubmit = event => {
    event.preventDefault()
<commit_msg>Fix remove upload image issue<commit_after>import React, { Component, PropTypes } from 'react'
import {
  Container,
  Segment,
  Grid,
  Form,
  Image,
  Label,
  Card,
  Divider,
  Button
} from 'semantic-ui-react'
import { browserHistory } from 'react-router'
import { uniqBy, union } from 'lodash'
import Zooming from 'zooming'

import { upload } from '../actions/user'
import { search } from '../actions/entities'
import { resetErrorMessageIfNeeded } from '../actions/common'

const propTypes = {
  dispatch: PropTypes.func.isRequired,
  isUploading: PropTypes.bool.isRequired
}

class UploadPage extends Component {
  state = {
    files: [],
    tagSuggestions: [],
    tags: [],
    nsfw: false,
    zooming: new Zooming({
      bgColor: '#000'
    })
  }

  handleInputChange = (event, { value }) => {
    this.setState({
      tags: value
    })
  }

  handleSearchChange = (event, value) => {
    const { dispatch } = this.props

    dispatch(search({ query: value })).then(res => {
      const { value } = res
      const { data } = value
      const newSuggestions = data.map(({ name }) => {
        return { text: name, value: name }
      })

      this.setState({
        tagSuggestions: uniqBy(
          union(this.state.tagSuggestions, newSuggestions),
          'text'
        )
      })
    })
  }

  handleAddTag = (event, { value }) => {
    this.setState({
      tagSuggestions: uniqBy(
        [{ text: value, value }, ...this.state.tagSuggestions],
        'text'
      )
    })
  }

  handleImageChange = e => {
    e.preventDefault()
    const { dispatch } = this.props
    dispatch(resetErrorMessageIfNeeded())

    this.setState({ files: [] })
    const files = e.target.files

    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      let reader = new FileReader()

      reader.onloadend = () => {
        file.preview = reader.result

        this.setState({
          files: [...this.state.files, file]
        })

        this.state.zooming.listen('.img-preview')
      }

      reader.readAsDataURL(file)
    }
  }

  handleRemoveImage = index => {
    this.setState(
      {
        files: this.state.files.filter((_, i) => i !== index)
      },
      () => {
        if (this.state.files.length === 0) {
          this.handleReset()
        }
      }
    )
  }

  handleReset = () => {
    const { dispatch } = this.props
    dispatch(resetErrorMessageIfNeeded())
    this.setState({
      files: [],
      tagSuggestions: [],
      tags: [],
      nsfw: false
    })
  }

  handleInputToggle = (event, data) => {
    const { name, checked } = data

    this.setState({
      [name]: checked
    })
  }

  handleSubmit = event => {
    event.preventDefault()

{'fraction_non_alphanumeric': 0.1455176191345627, 'fraction_numerical': 0.0018258170531312763, 'mean_word_length': 2.170138888888889, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 29, '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': '347146', 'n_tokens_mistral': 1761, 'n_tokens_neox': 1723, 'n_words': 372}