{"size": 819, "ext": "js", "max_stars_repo_path": "app/components/component-submit/src/components/UploadButton.js", "max_stars_repo_name": "Coko-Foundation/Kotahi", "max_stars_repo_stars_event_min_datetime": "2021-05-10T16:35:07.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-29T13:08:23.000Z", "max_issues_repo_path": "app/components/component-submit/src/components/UploadButton.js", "max_issues_repo_name": "Coko-Foundation/Kotahi", "max_issues_repo_issues_event_min_datetime": "2019-11-14T11:51:19.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T17:43:09.000Z", "max_forks_repo_path": "packages/ui/src/atoms/UploadButton.js", "max_forks_repo_name": "Coko-Foundation/pubsweet", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 24, "max_forks_count": null, "avg_line_length": 24.0882352941, "max_line_length": 69, "alphanum_fraction": 0.5982905983}
import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'

const Button = styled.button.attrs(() => ({
  type: 'button',
}))`
  background: transparent;
  border: ${th('borderWidth')} dashed ${th('colorBorder')};
  height: calc(${th('gridUnit')} * 3);
  cursor: pointer;
  margin-bottom: calc(${th('gridUnit')} * 3);
  padding: ${th('gridUnit')};
`

const UploadButton = ({ name, buttonText, onChange }) => {
  let fileInput
  return (
    <React.Fragment>
      <Button onClick={() => fileInput.click()}>{buttonText}</Button>
      <input
        multiple
        name={name}
        onChange={onChange}
        ref={input => (fileInput = input)}
        style={{ display: 'none' }}
        type="file"
      />
    </React.Fragment>
  )
}

export default UploadButton
