/
ImportFileMenuItem.jsx
40 lines (32 loc) · 1.04 KB
/
ImportFileMenuItem.jsx
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
import React, { Component } from "react"
import PropTypes from "prop-types"
import fileDialog from "file-dialog"
import YAML from "js-yaml"
import isJsonObject from "is-json"
export default class ImportFileMenuItem extends Component {
onClick = async () => {
const { onDocumentLoad } = this.props
const fileList = await fileDialog()
const fileReader = new FileReader()
fileReader.onload = fileLoadedEvent => {
let content = fileLoadedEvent.target.result
try {
const preparedContent = isJsonObject(content) ? YAML.dump(YAML.load(content)) : content
if (typeof onDocumentLoad === "function") {
onDocumentLoad(preparedContent)
}
} catch(e) {
alert(`Oof! There was an error loading your document:\n\n${e.message || e}`)
}
}
fileReader.readAsText(fileList.item(0), "UTF-8")
}
render() {
return <li>
<button type="button" onClick={this.onClick}>Import file</button>
</li>
}
}
ImportFileMenuItem.propTypes = {
onDocumentLoad: PropTypes.func.isRequired,
}