44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
|
import { useRef, useState } from 'react'
|
||
|
|
import { useWaste } from '../store'
|
||
|
|
|
||
|
|
export function FolderPicker() {
|
||
|
|
const { setSharedFiles } = useWaste()
|
||
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
||
|
|
const [label, setLabel] = useState<string | null>(null)
|
||
|
|
|
||
|
|
function onChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||
|
|
const fileList = e.target.files
|
||
|
|
if (!fileList || fileList.length === 0) return
|
||
|
|
const map = new Map<string, File>()
|
||
|
|
for (let i = 0; i < fileList.length; i++) {
|
||
|
|
const f = fileList[i]
|
||
|
|
map.set(f.name, f)
|
||
|
|
}
|
||
|
|
setSharedFiles(map)
|
||
|
|
const first = fileList[0]
|
||
|
|
const parts = (first.webkitRelativePath || first.name).split('/')
|
||
|
|
setLabel(`${parts[0]} (${map.size} file${map.size !== 1 ? 's' : ''})`)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="folder-picker">
|
||
|
|
<input
|
||
|
|
ref={inputRef}
|
||
|
|
type="file"
|
||
|
|
// @ts-expect-error webkitdirectory is non-standard
|
||
|
|
webkitdirectory=""
|
||
|
|
multiple
|
||
|
|
style={{ display: 'none' }}
|
||
|
|
onChange={onChange}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
className="folder-picker-btn"
|
||
|
|
onClick={() => inputRef.current?.click()}
|
||
|
|
title="Share a folder with peers"
|
||
|
|
>
|
||
|
|
{label ?? '+ Share folder'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|