@bytesoftio/helpers-input
Installation
yarn add @bytesoftio/helpers-input
or npm install @bytesoftio/helpers-input
Table of contents
Description
This package provides several helpers to deal with file inputs.
Examples
Submit a file to the server
Submit a file immediately after selecting one.
import { selectFile } from "@bytesoftio/helpers-input"
import axios from "axios"
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' },
})
}
<button onClick={handleSelectFile}/>
Show a file preview
Show a file preview immediately after selection.
import { selectFileOfType } from "@bytesoftio/helpers-input"
const handleSelectFileOfType = async () => {
const file = await selectFileOfType('image/*')
if ( ! file) return
showPreview(file)
}
const showPreview = (file: File) => {
const img = document.createElement('img')
img.src = URL.createObjectURL(file)
document.body.appendChild(img)
}
<button onClick={handleSelectFileOfType}/>
Usage
selectFile
Let the user select a single file.
import { selectFile } from "@bytesoftio/helpers-input"
import axios from "axios"
const handleSelectFile = async () => {
const file = await selectFile()
if ( ! file) return
}
<button onClick={handleSelectFile}/>
selectFiles
Similar to selectFile
, but allows user to select multiple files.
import { selectFiles } from "@bytesoftio/helpers-input"
const handleSelectFiles = async () => {
const files = await selectFiles()
if ( ! files) return
}
<button onClick={handleSelectFiles}/>
selectFileOfType
Allow only specific types of files, used inputs accept
property behind the scenes, see here.
import { selectFileOfType } from "@bytesoftio/helpers-input"
const handleSelectFileOfType = async () => {
const file = await selectFileOfType('image/*')
if ( ! file) return
}
<button onClick={handleSelectFileOfType}/>
selectFilesOfType
Similar to selectFileOfType
, but allows user to select multiple files.
import { selectFilesOfType } from "@bytesoftio/helpers-input"
const handleSelectFilesOfType = async () => {
const files = await selectFilesOfType('image/*')
if ( ! files) return
}
<button onClick={handleSelectFilesOfType}/>