import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import File from "./File";

# File

> Input file themed with type as document

<CodeBlock>
  <File themed maxFileSize={7} type="document" />
</CodeBlock>

> Input file themed with type as audio

<CodeBlock>
  <File themed maxFileSize={1} type="audio" />
</CodeBlock>

> Input file themed with type as image

<CodeBlock>
  <File themed maxFileSize={5} type="image" />
</CodeBlock>

> Input file themed with type as video

<CodeBlock>
  <File themed maxFileSize={5} type="video" />
</CodeBlock>

> Input file field with wrapper, predefined extensions and ability to customize

<CodeBlock>
  <File maxFileSize={3} type=".png, .jpeg" />
</CodeBlock>

## Configuration

<ConfigBlock of={File} />

## Examples

<CodeBlock title="Type: Image">
  <File type="image" />
</CodeBlock>

<CodeBlock title="Type: File">
  <File type="file" />
</CodeBlock>

<CodeBlock title="Custom Icon">
  <File customIcon="haptik" />
</CodeBlock>

<CodeBlock title="Type: Multiple">
  <File multiple={true} />
</CodeBlock>

<CodeBlock title="Type: Custom Class name and Prefix class name">
  <File className="test" prefixClassName="pretest" />
</CodeBlock>

<CodeBlock title="OnUpload">
  <File
    onUpload={(file, index, numFiles) => {
      {
        alert("onUpload called");
      }
    }}
  />
</CodeBlock>

<CodeBlock title="OnUpload - multiple">
  <File multiple={true} onUpload={(file, index, numFiles) => {}} />
</CodeBlock>

<CodeBlock title="Type: Custom Extension">
  <File type="image/png" />
</CodeBlock>

<CodeBlock title="Type: Custom Extension">
  <File type=".csv" />
</CodeBlock>

<CodeBlock title="Type: Custom Validate">
  <File
    type=".csv"
    customValidate={(allowedFileTypes, file, fileType) => {
      let isValid = file.name.includes(".csv");
      return isValid;
    }}
  />
</CodeBlock>

<CodeBlock title="Type: Value & Ratio already present">
  <File value="test.jpg" ratio="1.1" />
</CodeBlock>

<CodeBlock title="Type: Size limit">
  <File size={5} />
</CodeBlock>