import React from 'react'
import { Icon } from 'cozy-ui/react'

const styles = {
  parent: {
    position: 'relative',
    width: '100%',
    boxSizing: 'border-box'
  },
  input: {
    position: 'absolute',
    top: 0,
    left: 0,
    opacity: 0,
    width: '100%',
    height: '100%',
    zIndex: 1,
    cursor: 'pointer'
  }
}

const UploadButton = ({ label, disabled, onUpload, className }) => (
  <label
    role="button"
    disabled={disabled}
    className={className}
    style={styles.parent}
  >
    <span
      style={{
        display: 'flex',
        alignItems: 'center'
      }}
    >
      <Icon icon="upload" />
      <span>{label}</span>
      <input
        type="file"
        multiple
        style={styles.input}
        disabled={disabled}
        onChange={e => {
          if (e.target.files) {
            onUpload(Array.from(e.target.files))
          }
        }}
      />
    </span>
  </label>
)

export default UploadButton

import React from 'react'
import { Icon } from 'cozy-ui/react'

const styles = {
  parent: {
    position: 'relative',
    overflow: 'hidden'
  },
  input: {
    position: 'absolute',
    top: 0,
    left: 0,
    opacity: 0,
    width: '100%',
    height: '100%',
    zIndex: 1
  }
}

const UploadButton = ({ label, disabled, onUpload, className }) => (
  <label
    role="button"
    disabled={disabled}
    className={className}
    style={styles.parent}
  >
    <span>
      <Icon icon="upload" />
      <span>{label}</span>
      <input
        type="file"
        multiple
        style={styles.input}
        disabled={disabled}
        onChange={e => {
          if (e.target.files) {
            onUpload(Array.from(e.target.files))
          }
        }}
      />
    </span>
  </label>
)

export default UploadButton

Revert "Fix. Upload Item has the right size and svg icon is aligned"
Revert "Fix. Upload Item has the right size and svg icon is aligned"

This reverts commit ded9138999e0d1d9fa4a8dddf982f116b5ba0c11 as this is not needed anymore and buggy as well
