-
Notifications
You must be signed in to change notification settings - Fork 0
/
test-upload.html
71 lines (62 loc) · 2.37 KB
/
test-upload.html
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
<!DOCTYPE html>
<html>
<head>
<title>Test Photo GraphQL Upload</title>
</head>
<body>
<input id="token" type="text" placeholder="user token..." required />
<input id="photo-to-post" type="file" accept="image/jpeg" onchange="postPhoto()"/>
<script>
var token = localStorage.getItem('token')
var tokenText = document.getElementById('token')
var photoFileField = document.getElementById('photo-to-post')
if (token) {
tokenText.value = token
}
function postPhoto() {
token = tokenText.value
localStorage.setItem('token', token)
var url = 'http://localhost:4000/graphql'
let operation = {
query: `mutation postPhoto($input:PostPhotoInput!) {
postPhoto(input:$input) { url }
}`,
variables: {
input: {
name: 'test photo',
category: 'ACTION',
file: null
}
}
}
let map = {
'0': ['variables.input.file']
}
let body = new FormData()
body.append('operations', JSON.stringify(operation))
body.append('map', JSON.stringify(map))
body.append(0, photoFileField.files[0])
var opts = {
method: 'POST',
body,
headers: {
"Authorization": `bearer ${token}`
}
}
fetch(url, opts)
.then(res => res.json())
.then(({data}) => data.postPhoto.url)
.then(url => {
var img = document.createElement('img')
img.style.display = 'block'
img.width = 350
img.src = `http://localhost:4000${url}`
img.alt = name
document.body.appendChild(img)
})
.catch(console.error)
console.log('posting photo')
}
</script>
</body>
</html>