<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nakome/pen/wGxbLY?depth=everything&order=popularity&page=22&q=upload&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">html {
font-size: 1em;
line-height: 1.4;
height: 100%;
text-rendering: optimizeLegibility;
}
body {
font-family: 'Source Code Pro', 'Helvetica Neue', Helvetica, Arial, Verdana, 'Adobe Blank', sans-serif;
font-size: 12px;
max-width: 1200px;
margin: 0 auto;
text-align: center;
color: #292828;
background: #feffff;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
}
.thumb {
position: relative;
display: block;
float: left;
overflow: hidden;
/* clearfix */
width: calc(100%/3 - 1.2em);
height: 17em;
margin: 1em .5em;
border: 1px solid #e5e5e5;
background: #fff;
}
.thumb a {
font-size: 1.5em;
position: absolute;
top: 0;
right: 0;
padding: .2em .4em;
-webkit-transition: background 500ms ease;
transition: background 500ms ease;
text-decoration: none;
color: white;
background: rgba(0, 0, 0, .28);
}
.thumb:hover {
cursor: cell;
}
.thumb a:hover,
.thumb a:focus,
.img-full-container .close:hover,
.img-full-container .close:focus {
-webkit-transition: background 500ms ease;
transition: background 500ms ease;
background: red;
}
.thumb img {
display: block;
width: 100%;
}
/* Expand
_______________________*/
.img-full-container {
position: fixed;
z-index: 999997;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
padding: 10px;
cursor: pointer;
text-align: center;
border-radius: 5px;
background-color: rgb(0, 0, 0);
}
.img-full-container img {
position: fixed;
z-index: 999998;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.img-full-container .close {
font-size: 2em;
line-height: 2em;
position: absolute;
z-index: 999999;
top: 0;
right: 0;
width: 2em;
height: 2em;
cursor: pointer;
text-align: center;
color: #fff;
background-color: #000;
}
.show-lightbox {
display: block;
}
.info {
display: block;
background: #3F51B5;
color: #FFF;
padding: 1em;
max-width: 25em;
height: auto;
vertical-align: middle;
margin: 2em auto;
font-size: 16px;
}
@media (max-width:1200px) {
.thumb {
width: calc(100%/4 - 1.2em);
}
}
@media (max-width:1023px) {
.thumb {
width: calc(100%/2 - 1.2em);
height:20em;
}
}
@media (max-width:600px) {
.thumb {
width: calc(100% - 1.2em);
height:auto;
}
}
@media (max-width:480px) {
.thumb {
width: 100%;
height:auto;
}
}</style></head><body>
<h1>Firebase image uploader test <small>max size: 300kb</small></h1>
<input type="file" class="block" id="image-input" />
<div id="image-display"></div>
<div class="img-full-container">
<img src="">
<div class="close">×</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdn.firebase.com/js/client/2.4.1/firebase.js'></script>
<script >// vars
var firebaseUrl = new Firebase('https://pendb.firebaseio.com/images'),
fileInput = document.querySelector('#image-input'),
preview = document.querySelector('#image-display');
// upload file fn
var uploadImage = function(callback) {
fileInput.addEventListener("change", function() {
preview.innerHTML = '';
if (this.files[0].size < '307200') {
if (this.files.length) {
preview.innerHTML = '<span class="info">Save Image please take a momment..</span>';
var e = new FileReader();
e.onload = function(e) {
firebaseUrl.push({
image: e.target.result
}, callback);
preview.innerHTML = '<span class="info">Success</span>';
fileInput.value = '';
}, e.readAsDataURL(this.files[0]);
}
} else {
preview.innerHTML = '<span class="info">File too big :(</span>';
var s = setTimeout(function() {
fileInput.value = '';
getImages();
clearTimeout(s);
}, 2000);
}
}, false);
};
// get images fn
var getImages = function() {
preview.innerHTML = '<span class="info">loading images please wait a few seconds</span>';
firebaseUrl.on('value', function(d) {
var items = d.val(),
html = '';
for (var i in items) {if (window.CP.shouldStopExecution(1)){break;}
html += [
'<span class="thumb expand">',
' <a href="javascript:;" onclick="return removeImage(\'', i, '\');">×</a>',
' <img src="' + items[i].image + '">',
'</span>'
].join('');
}
window.CP.exitedLoop(1);
preview.innerHTML = html;
expand();
});
};
// Remove images from firebase
var removeImage = function(id) {
if (confirm('Are you sure!')) {
firebaseUrl.child(id).remove();
} else {
return false;
}
};
// Zoom images
var expand = function() {
var images = document.querySelectorAll('.expand img');
var arr = Array.prototype.slice.call(images);
var lightbox = document.querySelector('.img-full-container');
Array.prototype.forEach.call(arr, function(obj, index) {
obj.addEventListener('click', function(e) {
e.preventDefault();
var link = obj.getAttribute('src');
lightbox.classList.add('show-lightbox');
lightbox.querySelector('img').setAttribute('src', link);
});
});
// close preview
lightbox.addEventListener('click', function(e) {
lightbox.classList.remove('show-lightbox');
lightbox.querySelector('img').setAttribute('src', '');
});
};
// get images
getImages();
// upload images and get
uploadImage(function() {
getImages();
});
//# sourceURL=pen.js
</script>
</body></html>
