-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* feat(#1251): Add file selector to demo application This PR should fix the request to add a file selector to the demo application see issue #1251 . * refactor(): Remove function, use it implicit * refactor(): Add interface props * refactor(): Update method usage use regular func as a Component declaration and the arrow func as a handler inside the component.
- Loading branch information
1 parent
18f943d
commit b74dcde
Showing
2 changed files
with
66 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import * as yaml from 'js-yaml'; | ||
import * as React from 'react'; | ||
import { ChangeEvent, RefObject, useRef } from 'react'; | ||
import styled from '../../src/styled-components'; | ||
|
||
const Button = styled.button` | ||
background-color: #fff; | ||
color: #333; | ||
padding: 2px 10px; | ||
touch-action: manipulation; | ||
cursor: pointer; | ||
user-select: none; | ||
border: 1px solid #ccc; | ||
font-size: 16px; | ||
height: 28px; | ||
box-sizing: border-box; | ||
vertical-align: middle; | ||
line-height: 1; | ||
outline: none; | ||
white-space: nowrap; | ||
@media (max-width: 699px) { | ||
display: none; | ||
} | ||
`; | ||
|
||
function FileInput(props: { onUpload }) { | ||
const hiddenFileInput: RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null); | ||
|
||
const handleClick = () => { | ||
if (hiddenFileInput && hiddenFileInput.current) { | ||
hiddenFileInput.current.click(); | ||
} | ||
}; | ||
|
||
const uploadFile = (event: ChangeEvent<HTMLInputElement>) => { | ||
const file = (event.target as HTMLInputElement).files![0]; | ||
const reader = new FileReader(); | ||
reader.onload = () => { | ||
props.onUpload(yaml.load(reader.result)); | ||
}; | ||
reader.readAsText(file); | ||
}; | ||
|
||
return ( | ||
<span> | ||
<Button onClick={handleClick}>Upload a file</Button> | ||
<input type="file" style={{ display: 'none' }} onChange={uploadFile} ref={hiddenFileInput} /> | ||
</span> | ||
); | ||
} | ||
|
||
export default FileInput; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters