aboutsummaryrefslogtreecommitdiff
path: root/pw_web/webconsole/components/uploadDb.tsx
blob: 3b01fb0bdb0123cacd18e0368429a75b7084716a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Copyright 2022 The Pigweed Authors
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//     https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

import Button from '@mui/material/Button';
import {Alert} from '@mui/material';
import {useState, useRef} from 'react';

interface Props {
  onUpload: (db: string) => void
}

export default function BtnUploadDB({onUpload}: Props) {
  const [uploaded, setUploaded] = useState(false);
  const [error, setError] = useState("");
  const uploadInputRef = useRef<HTMLInputElement>(null);

  if (uploaded) return (<Alert severity="success">DB Loaded</Alert>)
  return (
    <>
      <input
        ref={uploadInputRef}
        type="file"
        accept="text/*"
        style={{display: "none"}}
        onChange={async e => {
          const tokenCsv = await readFile(e.target.files![0]);
          try {
            onUpload(tokenCsv);
            setUploaded(true);
            setError("");
          }
          catch (e: any) {
            if (e instanceof Error) setError(e.message);
            else setError("Error loading token database.");
          }
        }}
      />
      <Button
        onClick={() => uploadInputRef.current && uploadInputRef.current.click()}
        variant="contained">
        Upload token database
      </Button>
      {error && <Alert severity="error">{error}</Alert>}
    </>
  )
}

function readFile(file: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    if (!file) return resolve('');
    const reader = new FileReader();
    reader.onload = function (e) {
      resolve(String(e.target!.result));
    };
    reader.readAsText(file);
  });
}