@dnb/eufemia/components/upload/UploadFileInput.js

DNB Eufemia Design System UI Library

"use client";

var _UploadStatus;
import React, { useCallback, useRef } from 'react';
import Button from "../button/Button.js";
import { folder as FolderIcon } from "../../icons/index.js";
import { makeUniqueId } from "../../shared/component-helper.js";
import { UploadContext } from "./UploadContext.js";
import UploadStatus from "./UploadStatus.js";
import { getAcceptedFileTypes } from "./UploadVerify.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const UploadFileInput = ({
  children,
  disabled,
  files,
  ...rest
}) => {
  const fileInput = useRef(null);
  const context = React.useContext(UploadContext);
  const {
    id,
    acceptedFileTypes,
    buttonText,
    onInputUpload,
    filesAmountLimit,
    variant,
    buttonProps
  } = context;
  const openFileDialog = () => {
    var _fileInput$current;
    return (_fileInput$current = fileInput.current) === null || _fileInput$current === void 0 ? void 0 : _fileInput$current.click();
  };
  const sharedId = id || makeUniqueId();
  const accept = getAcceptedFileTypes(acceptedFileTypes);
  const onChangeHandler = useCallback(event => {
    const target = event.target;
    const {
      files
    } = target;
    onInputUpload(Array.from(files).map(file => {
      return {
        file
      };
    }));
  }, [onInputUpload]);
  const onClickHandler = useCallback(event => {
    const target = event.target;
    target.value = null;
  }, []);
  return _jsxs("div", {
    className: "dnb-upload__file-input-area",
    children: [filesAmountLimit !== (files === null || files === void 0 ? void 0 : files.length) && _jsx(Button, {
      top: variant === 'default' ? 'medium' : undefined,
      id: `${sharedId}-input`,
      className: "dnb-upload__file-input-button",
      icon: FolderIcon,
      iconPosition: "left",
      variant: "secondary",
      wrap: true,
      disabled: disabled,
      text: buttonText,
      ...buttonProps,
      onClick: e => {
        var _buttonProps$onClick;
        openFileDialog();
        buttonProps === null || buttonProps === void 0 || (_buttonProps$onClick = buttonProps.onClick) === null || _buttonProps$onClick === void 0 || _buttonProps$onClick.call(buttonProps, e);
      }
    }), _UploadStatus || (_UploadStatus = _jsx(UploadStatus, {})), _jsx("input", {
      "aria-labelledby": `${sharedId}-input`,
      ref: fileInput,
      accept: accept,
      className: "dnb-upload__file-input",
      type: "file",
      onChange: onChangeHandler,
      onClick: onClickHandler,
      multiple: filesAmountLimit > 1,
      disabled: disabled,
      ...rest
    })]
  });
};
export default UploadFileInput;
//# sourceMappingURL=UploadFileInput.js.map