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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { history } from 'app/store'
import { unslugify } from 'app/utils'
import actions from 'app/actions'
class CursorList extends Component {
state = {
playing: false,
play_id: -1,
}
constructor(props) {
super(props)
this.upload = this.upload.bind(this)
}
upload(e) {
e.preventDefault()
document.body.className = ''
const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
let i
if (!files.length) return
const promises = Array.from(files).map(file => this.uploadTaggedImage(file, 'cursor', file.filename))
Promise.all(promises)
.then(() => {
this.setState({ status: "" })
})
}
uploadTaggedImage(file, tag, fn) {
return new Promise((resolve, reject) => {
this.setState({ status: "Uploading " + tag + "..." })
const reader = new FileReader()
reader.onload = fileReaderEvent => {
reader.onload = null
const img = new Image()
img.onload = () => {
img.onload = null
upload(img)
}
img.src = fileReaderEvent.target.result
}
reader.readAsDataURL(file)
const upload = img => {
const uploadData = {
tag,
file,
__file_filename: fn,
graph_id: this.props.graph.id,
username: 'swimmer',
settings: JSON.stringify({
width: img.naturalWidth,
height: img.naturalHeight,
}),
}
// console.log(uploadData)
return actions.upload.upload(uploadData).then(data => {
// console.log(data)
resolve({
...data.res,
})
})
}
})
}
destroyFile(upload) {
return new Promise((resolve, reject) => {
actions.upload.destroy(upload)
.then(() => {
console.log('Destroy successful')
resolve()
})
.catch(() => {
console.log('Error deleting the file')
reject()
})
})
}
render() {
const { playing, play_id } = this.state
const { graph, onClick } = this.props
// console.log(graph.uploads)
return (
<div className='box cursorList'>
<div className="uploadButton">
<button>
<span>
{"Upload a cursor"}
</span>
</button>
<input
type="file"
accept="image/*"
onChange={this.upload}
multiple
/>
</div>
<div className='cursors'>
{graph.uploads.map(upload => (
upload.tag === 'cursor' && (
<div className='cursorItem' key={upload.id} onClick={() => onClick && onClick(upload)}>
<img src={upload.url} alt={upload.fn} />
</div>
)
))}
</div>
</div>
)
}
}
const mapStateToProps = state => ({
graph: state.graph.show.res,
})
const mapDispatchToProps = dispatch => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(CursorList)
|
