70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import { useCallback, useRef, useState } from "react";
|
|
|
|
export interface FileWithPath extends File {
|
|
readonly path?: string;
|
|
}
|
|
|
|
export default function useFileInput({ directory }: { directory?: boolean }) {
|
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
|
const inputRef = useRef<HTMLInputElement>();
|
|
|
|
const openSelectorDialog = useCallback(() => {
|
|
if (inputRef.current) {
|
|
inputRef.current.value = null;
|
|
inputRef.current.click();
|
|
}
|
|
}, []);
|
|
|
|
const handleChange: React.ChangeEventHandler<HTMLInputElement> = async (
|
|
event,
|
|
) => {
|
|
if (!!event.target && !!event.target.files) {
|
|
const files = [...event.target.files].map((file) =>
|
|
toFileWithPath(file),
|
|
);
|
|
setSelectedFiles(files);
|
|
}
|
|
};
|
|
|
|
const getInputProps = useCallback(
|
|
() => ({
|
|
type: "file",
|
|
multiple: true,
|
|
style: { display: "none" },
|
|
...(directory ? { directory: "", webkitdirectory: "" } : {}),
|
|
ref: inputRef,
|
|
onChange: handleChange,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
return {
|
|
getInputProps,
|
|
open: openSelectorDialog,
|
|
selectedFiles: selectedFiles,
|
|
};
|
|
}
|
|
|
|
// https://github.com/react-dropzone/file-selector/blob/master/src/file.ts#L88
|
|
export function toFileWithPath(file: File, path?: string): FileWithPath {
|
|
if (typeof (file as any).path !== "string") {
|
|
// on electron, path is already set to the absolute path
|
|
const { webkitRelativePath } = file;
|
|
Object.defineProperty(file, "path", {
|
|
value:
|
|
typeof path === "string"
|
|
? path
|
|
: typeof webkitRelativePath === "string" && // If <input webkitdirectory> is set,
|
|
// the File will have a {webkitRelativePath} property
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
|
|
webkitRelativePath.length > 0
|
|
? webkitRelativePath
|
|
: file.name,
|
|
writable: false,
|
|
configurable: false,
|
|
enumerable: true,
|
|
});
|
|
}
|
|
return file;
|
|
}
|