-
Notifications
You must be signed in to change notification settings - Fork 10
/
yo.html
94 lines (68 loc) · 3.35 KB
/
yo.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
<!DOCTYPE html>
<!-- This is the shortest Image Uploader ever :)
And you can even make it shorter if you don't
want all the drag'n drop thing. -->
<!--
AUTHOR: @paulrouget <paul@mozilla.com>
LICENSE:
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO. -->
<!-- One single file. This one. -->
<meta charset="utf8">
<title>Yo.</title>
<!-- This is a simple image uploader, with drag'n drop -->
<!-- Also, if you want to do more, read this: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ -->
<!-- You can use this code whereever you want (your own domain)
No server side code needed. -->
<!-- The image is sent to imgur.com because they allow Cross Domain XMLHttpRequest.
You'll need a key: http://api.imgur.com/ -->
<!-- So this is the dropbox, with a <button> in case of the user doesn't
have icons. Yes. Think about Fvwm (Linux) users like me -->
<div>DROP!<button onclick="document.querySelector('input').click()">Or click</button></div>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">
<!-- So here is the magic -->
<script>
/* Drag'n drop stuff */
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {
/* Is the file an image? */
if (!file || !file.type.match(/image.*/)) return;
/* It is! */
document.body.className = "uploading";
/* Lets build a FormData object*/
var fd = new FormData(); // I wrote about it: https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
fd.append("image", file); // Append the file
var xhr = new XMLHttpRequest(); // Create the XHR (Cross-Domain XHR FTW!!!) Thank you sooooo much imgur.com
xhr.open("POST", "https://api.imgur.com/3/image.json"); // Boooom!
xhr.onload = function() {
// Big win!
document.querySelector("#link").href = JSON.parse(xhr.responseText).data.link;
document.body.className = "uploaded";
}
xhr.setRequestHeader('Authorization', 'Client-ID 28aaa2e823b03b1'); // Get your own Client-ID at http://api.imgur.com/
// Ok, I don't handle the errors. An exercise for the reader.
/* And now, we send the formdata */
xhr.send(fd);
}
</script>
<!-- Bla bla bla stuff ... -->
<style>
body {text-align: center; padding-top: 100px;}
div { border: 10px solid black; text-align: center; line-height: 100px; width: 200px; margin: auto; font-size: 40px; display: inline-block;}
#link, p , div {display: none}
div {display: inline-block;}
.uploading div {display: none}
.uploaded div {display: none}
.uploading p {display: inline}
.uploaded #link {display: inline}
em {position: absolute; bottom: 0; right: 0}
</style>
<p>Uploading...</p>
<a id="link">It's online!!!</a>
<em>Look at the source code for more information. By <a href="http://twitter.com/paulrouget">@paulrouget</a>.</em>