add upload button for fav words
This commit is contained in:
55
src/views/Options/UploadButton.js
Normal file
55
src/views/Options/UploadButton.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import { useRef } from "react";
|
||||
import FileUploadIcon from "@mui/icons-material/FileUpload";
|
||||
import { useI18n } from "../../hooks/I18n";
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
export default function UploadButton({
|
||||
handleImport,
|
||||
text,
|
||||
fileType = "json",
|
||||
fileExts = [".json"],
|
||||
}) {
|
||||
const i18n = useI18n();
|
||||
const inputRef = useRef(null);
|
||||
const handleClick = () => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.click();
|
||||
inputRef.current.value = null;
|
||||
}
|
||||
};
|
||||
const onChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!file.type.includes(fileType)) {
|
||||
alert(i18n("error_wrong_file_type"));
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (e) => {
|
||||
handleImport(e.target.result);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={handleClick}
|
||||
startIcon={<FileUploadIcon />}
|
||||
>
|
||||
{text}
|
||||
<input
|
||||
type="file"
|
||||
accept={fileExts.join(", ")}
|
||||
ref={inputRef}
|
||||
onChange={onChange}
|
||||
hidden
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user