Zakaria
21 lines
1.1 KiB
TypeScript
21 lines
1.1 KiB
TypeScript
import {useRef} from 'react'
|
|
import {parse} from 'yaml'
|
|
import {Upload} from 'lucide-react'
|
|
|
|
export function CloudFormationTemplateUpload({onLoad, onError}: {onLoad: (template: string, name: string) => void; onError: (message: string) => void}) {
|
|
const input = useRef<HTMLInputElement>(null)
|
|
async function load(file?: File) {
|
|
if (!file) return
|
|
if (!/\.(json|ya?ml)$/i.test(file.name)) return onError('Choose a JSON, YAML, or YML template file.')
|
|
const template = await file.text()
|
|
try {
|
|
if (/\.json$/i.test(file.name)) JSON.parse(template)
|
|
else parse(template)
|
|
onLoad(template, file.name)
|
|
} catch {
|
|
onError(`${file.name} is not valid ${/\.json$/i.test(file.name) ? 'JSON' : 'YAML'}.`)
|
|
}
|
|
}
|
|
return <><input ref={input} type="file" accept=".json,.yaml,.yml,application/json,application/x-yaml,text/yaml" hidden onChange={(event) => void load(event.target.files?.[0])}/><button className="button compact" type="button" onClick={() => input.current?.click()}><Upload size={13}/> Upload JSON or YAML</button></>
|
|
}
|