-
Notifications
You must be signed in to change notification settings - Fork 79
/
index.html
151 lines (130 loc) · 12.7 KB
/
index.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<html>
<head>
<title>Base64 File Encoder</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style>
body {
text-align: center;
font-family: Helvetica;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
h2 {
padding-top: 30px;
}
.item {
position: relative;
margin: 10px;
background: #F5F5F5;
padding: 20px;
}
.remove {
position: absolute;
right: 10;
top: 10;
opacity: 0.5;
}
textarea {
width: 100%;
margin: 2px 0px;
height: 120px;
font-family: Courier;
border: none;
background: whitesmoke;
}
#results {
position: relative;
margin: 50px;
}
#dropper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#dropper.hover {
opacity: 0.5;
background: lightblue;
z-index: 100;
}
</style>
</head>
<body>
<a href="https://github.com/jpillora/base64-encoder">
<img style="position: absolute; z-index: 2; top: 0; left: 0; border: 0;" src="data:image/png;base64,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" alt="Fork me on GitHub">
</a>
<h2>Base64 File Encoder</h2>
<h4>Drop Files here</h4>
<div id="dropper"></div>
<div id="results"></div>
<script>
if (typeof window.FileReader === 'undefined')
alert('File API & FileReader not supported');
var dropper = document.getElementById("dropper");
var results = document.getElementById("results");
dropper.ondragenter = function (e) {
dropper.className = 'hover';
e.preventDefault();
};
dropper.ondragover = function (e) {
e.preventDefault();
};
dropper.ondragleave = function (e) {
dropper.className = '';
e.preventDefault();
};
dropper.ondrop = function (e) {
var files = [].slice.call(e.dataTransfer.files);
files.forEach(function (file) {
var reader = new FileReader();
reader.onload = function (event) {
fileLoaded(file.name, event.target.result);
};
reader.readAsDataURL(file);
});
dropper.className = '';
e.preventDefault();
};
function fileLoaded(filename, dataUri) {
var div = document.createElement("div");
div.className = 'item';
var remove = document.createElement("button");
remove.className = 'remove';
remove.innerHTML = 'x';
remove.onclick = function () {
if (localStorage) localStorage.removeItem("b64-" + filename);
results.removeChild(div);
};
div.appendChild(remove);
var name = document.createElement("div");
name.innerHTML = filename;
div.appendChild(name);
if (/^data:image/.test(dataUri)) {
var imgDiv = document.createElement("div");
var img = document.createElement("img");
img.src = dataUri;
img.style['max-width'] = '100px';
img.style['height-width'] = '100px';
imgDiv.appendChild(img);
div.appendChild(imgDiv);
}
var ta = document.createElement("textarea");
ta.onclick = function () {
ta.select();
};
ta.value = dataUri;
div.appendChild(ta);
results.appendChild(div);
if (localStorage) localStorage.setItem("b64-" + filename, dataUri);
}
if (localStorage)
for (var filename in localStorage)
if (filename.indexOf("b64-") === 0)
fileLoaded(filename.replace("b64-", ""), localStorage.getItem(filename));
</script>
</body>
</html>