# Input Helpers

Source code is hosted on [GitHub](https://github.com/corets/input-helpers)

{% tabs %}
{% tab title="yarn" %}

```bash
yarn add @corets/input-helpers
```

{% endtab %}

{% tab title="npm" %}

```
npm install --save @corets/input-helpers
```

{% endtab %}
{% endtabs %}

## Quick Start <a href="#select-a-file-and-send-to-server" id="select-a-file-and-send-to-server"></a>

Prompt user to select a file and send it to a server:

```typescript
import React from "react"
import { selectFile } from "@corets/input-helpers"
import axios from "axios"

const Example = () => {
  const handleSelectFile = async () => {
    const file = await selectFile()
    
    if ( ! file) return
    
    submitFile(file)
  }
  
  const submitFile = async (file: File) => {
    const formData = new FormData()
    formData.append('file', file)
    
    await axios.post(`/endpoint`, formData, {
      headers: { 'content-type': 'multipart/form-data' },
    })
  }
  
  return <button onClick={handleSelectFile}/>
}
```

Prompt user to select a file and show a preview:

```typescript
import React, { useState } from "react"
import { selectFileOfType } from "@corets/input-helpers"

const Example = () => {
  const [selectedFile, setSelectedFile] = useState()
  
  const handleSelectFileOfType = async () => {
    const file = await selectFileOfType('image/*')
    if (!file) return
    
    setSelectedFile(file)
  }
  
  return (
    <div>
      <button onClick={handleSelectFileOfType}/>
      {selectedFile && (
        <img src={URL.createObjectURL(selectedFile)}/>
      )}
    </div>
  )
}
```

## selectFile() <a href="#selectfile" id="selectfile"></a>

Prompt user to select one file:

```typescript
import { selectFile } from "./selectFile"

const file = await selectFile()

if (file) {
  // some something with the file...
}
```

## selectFiles() <a href="#selectfiles" id="selectfiles"></a>

Prompt user to select multiple files:

```typescript
import { selectFiles } from "@corets/input-helpers"

const files = await selectFiles()

if (files.length > 0) {
  // do something with the files...
}
```

## selectFileOfType() <a href="#selectfileoftype" id="selectfileoftype"></a>

Prompt user to select a file of a specific type:

```typescript
import { selectFileOfType } from "@corets/input-helpers"

const file = await selectFileOfType('image/*')

if (file) {
  // so something with the file
}
```

{% hint style="info" %}
Read more about file types [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
{% endhint %}

## selectFilesOfType() <a href="#selectfilesoftype" id="selectfilesoftype"></a>

Prompt user to select multiple files of a specific type:

```typescript
import { selectFilesOfType } from "@corets/input-helpers"

const files = await selectFilesOfType('image/*')

if (files.length > 0) {
  // so something with the files...
}
```