Repository: h2oai/wave
File: ui/src/file_upload.tsx (TypeScript)

Code before:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { stylesheet } from 'typestyle';
import { B, bond, box, S, telesync, U, xid } from './telesync';
import { getTheme, centerMixin, dashed, clas } from './theme';

/**
 * Create a file upload component.
 * A file upload component allows a user to browse, select and upload one or more files.
 */
export interface FileUpload {
  /** An identifying name for this component. */
  name: S
  /** Text to be displayed alongside the component. */
  label?: S
  /** True if the component should allow multiple files to be uploaded. */
  multiple?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** An optional string array for defining allowed upload types. E.g. .pdf, .docx ... . Default value is empty - every file type is allowed. */
  allowedFileTypes?: S[]
  /** Maximum file size in Mb that none of the files uploaded can exceed. Default value is unlimited. */
  maxSizePerFile?: U
  /** Maximum file size in Mb for all uploaded files combined that cannot be excceeded. Default value is unlimited. */
  maxSizeTotal?: U
}

const
  { colors } = getTheme(),
  css = stylesheet({
    uploadInput: {
      opacity: 0
    },
    upload: {
      height: 300,
      ...centerMixin(),
      flexDirection: 'column',
      boxSizing: 'border-box',
      margin: 5,
    },
    uploadDragging: {
      border: dashed(2, colors.text),
    },
    uploadLabel: {
      ...centerMixin(),
      padding: 15,
      background: colors.text,
      color: colors.page,
      minWidth: 80,

Review comment (suggestion):
```suggestion
  /** Maximum allowed size (Mb) for all files combined. Defaults to no limit. */
```

Code after:
import * as Fluent from '@fluentui/react';
import React from 'react';
import { stylesheet } from 'typestyle';
import { B, bond, box, S, telesync, U, xid, F } from './telesync';
import { getTheme, centerMixin, dashed, clas } from './theme';

/**
 * Create a file upload component.
 * A file upload component allows a user to browse, select and upload one or more files.
 */
export interface FileUpload {
  /** An identifying name for this component. */
  name: S
  /** Text to be displayed alongside the component. */
  label?: S
  /** True if the component should allow multiple files to be uploaded. */
  multiple?: B
  /** List of allowed file extensions, e.g. `pdf`, `docx`, etc. */
  file_extensions?: S[]
  /** Maximum allowed size (Mb) per file. Defaults to no limit. */
  max_file_size?: F
  /** Maximum allowed size (Mb) for all files combined. Defaults to no limit. */
  max_size?: F
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

const
  { colors } = getTheme(),
  css = stylesheet({
    uploadInput: {
      opacity: 0
    },
    upload: {
      height: 300,
      ...centerMixin(),
      flexDirection: 'column',
      boxSizing: 'border-box',
      margin: 5,
    },
    uploadDragging: {
      border: dashed(2, colors.text),
    },
    uploadLabel: {
      ...centerMixin(),
      padding: 15,
      background: colors.text,
      color: colors.page,
      minWidth: 80,