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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _UploadStatus;
const _excluded = ["children", "disabled", "files"];
import React, { useRef } from 'react';
import Button from '../button/Button';
import { folder as FolderIcon } from '../../icons';
import { makeUniqueId } from '../../shared/component-helper';
import { UploadContext } from './UploadContext';
import UploadStatus from './UploadStatus';
import { getAcceptedFileTypes } from './UploadVerify';
const UploadFileInput = _ref => {
  let {
      children,
      disabled,
      files
    } = _ref,
    rest = _objectWithoutProperties(_ref, _excluded);
  const fileInput = useRef(null);
  const context = React.useContext(UploadContext);
  const {
    id,
    acceptedFileTypes,
    buttonText,
    onInputUpload,
    filesAmountLimit,
    variant
  } = 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);
  return React.createElement("div", {
    className: "dnb-upload__file-input-area"
  }, filesAmountLimit !== (files === null || files === void 0 ? void 0 : files.length) && React.createElement(Button, {
    top: variant === 'normal' ? 'medium' : undefined,
    id: `${sharedId}-input`,
    className: "dnb-upload__file-input-button",
    icon: FolderIcon,
    icon_position: "left",
    variant: "secondary",
    wrap: true,
    onClick: openFileDialog,
    disabled: disabled
  }, buttonText), _UploadStatus || (_UploadStatus = React.createElement(UploadStatus, null)), React.createElement("input", _extends({
    "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)));
  function onChangeHandler(event) {
    const target = event.target;
    const {
      files
    } = target;
    onInputUpload(Array.from(files).map(file => {
      return {
        file
      };
    }));
  }
  function onClickHandler(event) {
    const target = event.target;
    target.value = null;
  }
};
export default UploadFileInput;
//# sourceMappingURL=UploadFileInput.js.map