@grafana/ui/dist/esm/components/FileUpload/FileUpload.mjs.map

Grafana Components Library

{"version":3,"file":"FileUpload.mjs","sources":["../../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { FormEvent, useCallback, useState } from 'react';\nimport * as React from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles } from '../../themes/mixins';\nimport { ComponentSize } from '../../types/size';\nimport { trimFileName } from '../../utils/file';\nimport { getButtonStyles } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\nexport interface Props {\n  /** Callback function to handle uploaded file  */\n  onFileUpload: (event: FormEvent<HTMLInputElement>) => void;\n  /** Accepted file extensions */\n  accept?: string;\n  /** Overwrite or add to style */\n  className?: string;\n  /** Button size */\n  size?: ComponentSize;\n  /** Show the file name */\n  showFileName?: boolean;\n}\n\nexport const FileUpload = ({\n  onFileUpload,\n  className,\n  children = 'Upload file',\n  accept = '*',\n  size = 'md',\n  showFileName,\n}: React.PropsWithChildren<Props>) => {\n  const style = useStyles2(getStyles(size));\n  const [fileName, setFileName] = useState('');\n  const id = uuidv4();\n\n  const onChange = useCallback(\n    (event: FormEvent<HTMLInputElement>) => {\n      const file = event.currentTarget?.files?.[0];\n      if (file) {\n        setFileName(file.name ?? '');\n      }\n      onFileUpload(event);\n    },\n    [onFileUpload]\n  );\n\n  return (\n    <>\n      <input\n        type=\"file\"\n        id={id}\n        className={style.fileUpload}\n        onChange={onChange}\n        multiple={false}\n        accept={accept}\n        data-testid={selectors.components.FileUpload.inputField}\n      />\n      <label htmlFor={id} className={cx(style.labelWrapper, className)}>\n        <Icon name=\"upload\" className={style.icon} />\n        {children}\n      </label>\n\n      {showFileName && fileName && (\n        <span\n          aria-label={t('grafana-ui.file-upload.file-name', 'File name')}\n          className={style.fileName}\n          data-testid={selectors.components.FileUpload.fileNameSpan}\n        >\n          {trimFileName(fileName)}\n        </span>\n      )}\n    </>\n  );\n};\n\nconst getStyles = (size: ComponentSize) => (theme: GrafanaTheme2) => {\n  const buttonStyles = getButtonStyles({ theme, variant: 'primary', size, iconOnly: false });\n  const focusStyle = getFocusStyles(theme);\n\n  return {\n    fileUpload: css({\n      height: '0.1px',\n      opacity: '0',\n      overflow: 'hidden',\n      position: 'absolute',\n      width: '0.1px',\n      zIndex: -1,\n      '&:focus + label': focusStyle,\n      '&:focus-visible + label': focusStyle,\n    }),\n    labelWrapper: buttonStyles.button,\n    icon: buttonStyles.icon,\n    fileName: css({\n      marginLeft: theme.spacing(0.5),\n    }),\n  };\n};\n"],"names":["uuidv4"],"mappings":"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"}