-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathupload.html
112 lines (106 loc) · 4.14 KB
/
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
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
<!doctype html>
<html>
<head>
<title>Image Editor Example 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://yastatic.net/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script type="text/javascript">
window.onload = function () {
var uploadProgress = document.getElementById('upload-progress');
// Получаем из хеша ключ доступа к Яндекс.Диску
var hashParts = window.location.hash.substr(1).split('&');
var accessKey;
hashParts.every(function (item) {
var keyValue = item.split('=');
if (keyValue[0] === 'access_token') {
accessKey = keyValue[1];
return false;
}
});
if (accessKey) {
document.getElementById('uploader').addEventListener('change', function (event) {
makeUploadToYadiskRequest(event.target.files[0]);
});
}
function makeUploadToYadiskRequest (file) {
var xhr = createRequest(
'https://cloud-api.yandex.net/v1/disk/resources/upload?path=' + file.name, {
requestMethod: 'GET',
headers: {
'Authorization': 'OAuth ' + accessKey
},
responseType: 'json'
}
);
xhr.onload = function () {
var uploadData = xhr.response;
if (uploadData.error) {
return;
}
var formData = new FormData();
formData.append('file', file);
var uploadXHR = createRequest(
uploadData.href, {
requestMethod: uploadData.method
}
);
uploadXHR.upload.onprogress = function (e) {
var p = Math.round((e.loaded / e.total) * 100);
uploadProgress.style.width = p + '%';
};
uploadXHR.upload.onload = function () {
alert('done!');
};
uploadXHR.send(formData);
};
xhr.send(null);
}
function createRequest (url, params) {
params = params || {};
var xhr = new XMLHttpRequest();
xhr.open(params.requestMethod || 'GET', url, true);
if (params.headers) {
for (var key in params.headers) {
if (params.headers.hasOwnProperty(key)) {
xhr.setRequestHeader(key, params.headers[key]);
}
}
}
xhr.responseType = params.responseType;
return xhr;
}
};
</script>
<style>
.progress-bar-success {
height: 40px;
width: 0%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 jumbotron">
<h1>Upload file</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 mb20" style="text-align: center;">
<a href=https://oauth.yandex.ru/authorize?response_type=token&client_id=ed78acc2ac794ccba90292895bc5ecbc id=getToken class="btn btn-primary">GET OAUTH TOKEN</a>
</div>
<div class="col-md-6 mb20"style="text-align: center;">
<input type=file id=uploader style="display: inline-block;" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="progress">
<div id=upload-progress class="progress-bar-success"></div>
</div>
</div>
</div>
</div>
</body>
</html>