@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\n/**\n * A button-styled input that triggers file upload popup. Button text and accepted file extensions can be customized via `label` and `accepted` props respectively.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-fileupload--docs\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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"}