@itwin/itwinui-react/DEV-esm/core/FileUpload/FileUpload.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { Box, mergeEventHandlers } from '../../utils/index.js';
export const FileUpload = React.forwardRef((props, forwardedRef) => {
  let { dragContent, children, onFileDropped, contentProps, ...rest } = props;
  let [isDragActive, setIsDragActive] = React.useState(false);
  let onDragOverHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };
  let onDragEnterHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file')
      setIsDragActive(true);
  };
  let onDragLeaveHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isDragActive && !e.currentTarget?.contains(e.relatedTarget))
      setIsDragActive(false);
  };
  let onDropHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isDragActive) {
      setIsDragActive(false);
      onFileDropped(e.dataTransfer?.files, e);
    }
  };
  return React.createElement(
    Box,
    {
      ...rest,
      className: cx(
        'iui-file-upload',
        {
          'iui-drag': isDragActive,
        },
        props?.className,
      ),
      ref: forwardedRef,
      onDragEnter: mergeEventHandlers(props.onDragEnter, onDragEnterHandler),
      onDragOver: mergeEventHandlers(props.onDragOver, onDragOverHandler),
      onDragLeave: mergeEventHandlers(props.onDragLeave, onDragLeaveHandler),
      onDrop: mergeEventHandlers(props.onDrop, onDropHandler),
    },
    dragContent
      ? children
      : React.createElement(
          Box,
          {
            as: 'div',
            ...contentProps,
            className: cx('iui-content', contentProps?.className),
          },
          children,
        ),
    dragContent &&
      React.createElement(
        Box,
        {
          as: 'div',
          ...contentProps,
          className: cx('iui-content', contentProps?.className),
        },
        dragContent,
      ),
  );
});
if ('development' === process.env.NODE_ENV)
  FileUpload.displayName = 'FileUpload';