diff --git a/src/components/Committee.tsx b/src/components/Committee.tsx index 9e8ce897..d0e9f9ed 100644 --- a/src/components/Committee.tsx +++ b/src/components/Committee.tsx @@ -20,6 +20,7 @@ import { URLParameters } from '../types'; import Loading from './Loading'; import Footer from './Footer'; import Settings, { SettingsData, DEFAULT_SETTINGS } from './Settings'; +import Files from './Files'; interface Props extends RouteComponentProps { } @@ -228,6 +229,7 @@ export default class Committee extends React.Component { {makeMenuItem('Notes', 'sticky note outline')} + {makeMenuItem('Files', 'file pdf outline')} {makeMenuItem('Stats', 'bar chart')} {makeMenuItem('Settings', 'settings')} {makeMenuItem('Help', 'help')} @@ -261,6 +263,7 @@ export default class Committee extends React.Component { + diff --git a/src/components/Files.tsx b/src/components/Files.tsx new file mode 100644 index 00000000..cd909ca3 --- /dev/null +++ b/src/components/Files.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import * as firebase from 'firebase'; +import { CommitteeData } from './Committee'; +import { RouteComponentProps } from 'react-router'; +import { URLParameters } from '../types'; +import { TextArea, Segment, Form, Button, Popup, InputOnChangeData, Progress } from 'semantic-ui-react'; +import { textAreaHandler } from '../actions/handlers'; + +interface Props extends RouteComponentProps { +} + +interface State { + progress?: number; + file?: any; + state?: firebase.storage.TaskState; +} + +export default class Files extends React.Component { + constructor(props: Props) { + super(props); + + this.state = { + }; + } + + handleUploadError = (error: any) => { + // A full list of error codes is available at + // https://firebase.google.com/docs/storage/web/handle-errors + switch (error.code) { + case 'storage/unauthorized': + // User doesn't have permission to access the object + break; + case 'storage/canceled': + // User canceled the upload + break; + case 'storage/unknown': + // Unknown error occurred, inspect error.serverResponse + break; + default: + return + } + } + + handleSnapshot = (snapshot: any) => { + const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; + this.setState({progress: progress, state: snapshot.state}); + } + + handleComplete = () => { + // downloadURL = uploadTask.snapshot.downloadURL; + } + + onFileChange = (event: any) => { + this.setState({ file: event.target.files[0] }); + } + + triggerUpload = () => { + const { handleSnapshot, handleUploadError, handleComplete } = this; + const { file } = this.state; + + const { committeeID } = this.props.match.params; + + const storageRef = firebase.storage().ref(); + + const metadata = { + contentType: file.type + }; + + var uploadTask = storageRef.child('committees').child(committeeID).child(file.name).put(file, metadata); + + uploadTask.on( + firebase.storage.TaskEvent.STATE_CHANGED, + handleSnapshot, + handleUploadError, + handleComplete + ); + } + + render() { + const { progress, state } = this.state; + + return ( +
+ {state} + +
+ + +
+
+ ); + } +} \ No newline at end of file