InputFiles

By default, these are the accepted file types

{
  "pdf": [
    "application/pdf"
  ],
  "excel": [
    "application/vnd.ms-excel",
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  ],
  "csv": [
    "text/csv"
  ],
  "text": [
    "text/plain"
  ],
  "image": [
    "image/jpeg",
    "image/png",
    "image/tiff",
    "image/webp"
  ],
  "ppt": [
    "application/vnd.ms-powerpoint",
    "application/vnd.openxmlformats-officedocument.presentationml.presentation"
  ],
  "word": [
    "application/msword",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  ]
}

You can choose to accept specific file type(s) in a structured way using our mime types map like so:

import { supportedMimeTypesMap } from '@founderpath/utils/src/data-room'

<InputFiles accept={[...supportedMimeTypesMap.excel, ...supportedMimeTypesMap.pdf]} />
      

By default the maximum size per file is 20MB and max file count is 1. You can change that by passing a maxSize and maxFiles props:

import { supportedMimeTypesMap } from '@founderpath/utils/src/data-room'

<InputFiles accept={[...supportedMimeTypesMap.excel, ...supportedMimeTypesMap.pdf]} maxFiles={2} maxSize="1gb" />
      

That would result into this:

Label for your input here

Click or drop files(.csv .jpeg .pdf .png .tiff .webp .xls .xlsx)Max size per file: 1gbMax # of files: 2Password-protected PDFs are not allowed

The maxSize prop is typed for the sake of DX. If you were to enter an invalid format, you would get this kind of error:

Abusively small width example just show it can work... not recommended