LogoLogo
  • Home
  • Services
    • Fiber
    • Accessor
    • Schema
    • Form
    • Translator
  • Components
    • <Router/>
    • <Memo />
  • Observables
    • Async
    • Value
    • Store
    • List
    • Local Storage Value
    • Local Storage Store
    • Local Storage List
  • Hooks
    • useAsync
    • useAffect
    • useStream
    • useAction
    • useDebounce
    • useThrottle
    • usePrevious
    • useIdle
    • useValue
    • useList
    • useStore
    • useForm
    • useFormBinder
    • useTranslator
    • useQuery
  • Helpers
    • Tag
    • Input Helpers
    • Promise Helpers
    • Save Helpers
    • Pagination Helpers
    • Clipboard Helpers
    • Calendar Helpers
    • Local Storage Helpers
Powered by GitBook
On this page
  • Quick Start
  • selectFile()
  • selectFiles()
  • selectFileOfType()
  • selectFilesOfType()

Was this helpful?

  1. Helpers

Input Helpers

Various helpers related to input specific functionality.

PreviousTagNextPromise Helpers

Last updated 3 years ago

Was this helpful?

Source code is hosted on

yarn add @corets/input-helpers
npm install --save @corets/input-helpers

Quick Start

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

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:

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()

Prompt user to select one file:

import { selectFile } from "./selectFile"

const file = await selectFile()

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

selectFiles()

Prompt user to select multiple files:

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

const files = await selectFiles()

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

selectFileOfType()

Prompt user to select a file of a specific type:

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

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

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

selectFilesOfType()

Prompt user to select multiple files of a specific type:

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

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

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

Read more about file types .

GitHub
here