@grafana/ui/dist/cjs/components/FileUpload/FileUpload.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var mixins = require('../../themes/mixins.cjs');
var file = require('../../utils/file.cjs');
var Button = require('../Button/Button.cjs');
var Icon = require('../Icon/Icon.cjs');

"use strict";
const FileUpload = ({
  onFileUpload,
  className,
  children = "Upload file",
  accept = "*",
  size = "md",
  showFileName
}) => {
  const style = ThemeContext.useStyles2(getStyles(size));
  const [fileName, setFileName] = React.useState("");
  const id = React.useId();
  const onChange = React.useCallback(
    (event) => {
      var _a, _b, _c;
      const file = (_b = (_a = event.currentTarget) == null ? void 0 : _a.files) == null ? void 0 : _b[0];
      if (file) {
        setFileName((_c = file.name) != null ? _c : "");
      }
      onFileUpload(event);
    },
    [onFileUpload]
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      "input",
      {
        type: "file",
        id,
        className: style.fileUpload,
        onChange,
        multiple: false,
        accept,
        "data-testid": e2eSelectors.selectors.components.FileUpload.inputField
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: css.cx(style.labelWrapper, className), children: [
      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "upload", className: style.icon }),
      children
    ] }),
    showFileName && fileName && /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        "aria-label": i18n.t("grafana-ui.file-upload.file-name", "File name"),
        className: style.fileName,
        "data-testid": e2eSelectors.selectors.components.FileUpload.fileNameSpan,
        children: file.trimFileName(fileName)
      }
    )
  ] });
};
const getStyles = (size) => (theme) => {
  const buttonStyles = Button.getButtonStyles({ theme, variant: "primary", size, iconOnly: false });
  const focusStyle = mixins.getFocusStyles(theme);
  return {
    fileUpload: css.css({
      height: "0.1px",
      opacity: "0",
      overflow: "hidden",
      position: "absolute",
      width: "0.1px",
      zIndex: -1,
      "&:focus + label": focusStyle,
      "&:focus-visible + label": focusStyle
    }),
    labelWrapper: buttonStyles.button,
    icon: buttonStyles.icon,
    fileName: css.css({
      marginLeft: theme.spacing(0.5)
    })
  };
};

exports.FileUpload = FileUpload;
//# sourceMappingURL=FileUpload.cjs.map