mirror of https://github.com/kern/filepizza
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.3 KiB
JavaScript
95 lines
2.3 KiB
JavaScript
import Centered from './Centered'
|
|
import DropZone from './DropZone'
|
|
import ProgressBar from './ProgressBar'
|
|
import React from 'react'
|
|
import Spinner from './Spinner'
|
|
import Tempalink from './Tempalink'
|
|
import UploadActions from '../actions/UploadActions'
|
|
import UploadStore from '../stores/UploadStore'
|
|
import socket from 'filepizza-socket'
|
|
|
|
export default class UploadPage extends React.Component {
|
|
|
|
constructor() {
|
|
this.state = UploadStore.getState()
|
|
|
|
this._onChange = () => {
|
|
this.setState(UploadStore.getState())
|
|
}
|
|
|
|
this._onDownload = (peerID) => {
|
|
UploadActions.sendToDownloader(peerID)
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
UploadStore.listen(this._onChange)
|
|
socket.on('download', this._onDownload)
|
|
}
|
|
|
|
componentDidUnmount() {
|
|
UploadStore.unlisten(this._onChange)
|
|
socket.removeListener('download', this._onDownload)
|
|
}
|
|
|
|
uploadFile(file) {
|
|
UploadActions.uploadFile(file)
|
|
}
|
|
|
|
render() {
|
|
switch (this.state.status) {
|
|
case 'ready':
|
|
|
|
return <DropZone onDrop={this.uploadFile.bind(this)}>
|
|
<Centered ver>
|
|
|
|
<Spinner dir="up" />
|
|
|
|
<h1>FilePizza</h1>
|
|
<p>Your files, delivered.</p>
|
|
<p>Drag the file into this window to get started.</p>
|
|
<p>Or
|
|
<label className="myLabel">
|
|
<input type="file" required/>
|
|
<span>select a file</span>
|
|
</label>
|
|
.
|
|
</p>
|
|
</Centered>
|
|
</DropZone>
|
|
|
|
case 'processing':
|
|
return <Centered ver>
|
|
|
|
<Spinner dir="up" animated />
|
|
|
|
<h1>FilePizza</h1>
|
|
<p>Processing...</p>
|
|
|
|
</Centered>
|
|
|
|
case 'uploading':
|
|
var keys = Object.keys(this.state.peerProgress)
|
|
keys.reverse()
|
|
return <Centered ver>
|
|
|
|
<h1>FilePizza</h1>
|
|
<Spinner dir="up" animated {...this.state.file} />
|
|
|
|
<p>Send someone this link to download.</p>
|
|
<p>This link will work as long as this page is open.</p>
|
|
<Tempalink token={this.state.token} />
|
|
|
|
{keys.length > 0 ? <p>Download Progress</p> : null}
|
|
<div className="data">
|
|
{keys.map((key) => {
|
|
return <ProgressBar small value={this.state.peerProgress[key]} />
|
|
})}
|
|
</div>
|
|
|
|
</Centered>
|
|
}
|
|
}
|
|
|
|
}
|