Comment on page
Input Helpers
Various helpers related to input specific functionality.
yarn
npm
yarn add @corets/input-helpers
npm install --save @corets/input-helpers
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>
)
}
Prompt user to select one file:
import { selectFile } from "./selectFile"
const file = await selectFile()
if (file) {
// some something with the file...
}
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...
}
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
}
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...
}
Last modified 2yr ago