Skip to content

Instantly share code, notes, and snippets.

@estebanrfp
Created July 4, 2020 23:02
Show Gist options
  • Save estebanrfp/b1bdc7731a2269b0a58eb2c2cc8f6f2c to your computer and use it in GitHub Desktop.
Save estebanrfp/b1bdc7731a2269b0a58eb2c2cc8f6f2c to your computer and use it in GitHub Desktop.
JS Bin [add your bin description] // source https://jsbin.com/zotiyuk
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/lib/upload.js"></script>
</head>
<body>
<div class="model" style="display: none;">
<video width="100%" controls autoplay></video>
<audio width="100%" controls autoplay></audio>
<img style="max-width: 100%;">
</div>
<center>
<p>Drag & drop videos, songs, or images! <input type="file" multiple></p>
</center>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script id="jsbin-javascript">
const gun = Gun(['https://gunjs.herokuapp.com/gun', 'https://gun-us.herokuapp.com/gun', 'https://gun-eu.herokuapp.com/gun'])
$('html').upload(function resize(eve, up){
if(up){ return up.shrink(eve, resize, 1024) }
var b64 = (eve.base64 || ((eve.event || eve).target || eve).result || eve);
gun.get('test').get(eve.id).put(b64);
});
gun.get('test').map().on(function(data){
if(!data){ return }
var type = data.split(';')[0], ui;
if(type.indexOf('image') + 1){ ui = $("img").get(0) }
if(type.indexOf('video') + 1){ ui = $('video').get(0) }
if(type.indexOf('audio') + 1){ ui = $('audio').get(0) }
if(!ui){ return }
$(ui).clone().prependTo('center').get(0).src = data;
})
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"><\/script>
<script src="https://cdn.jsdelivr.net/npm/gun/lib/upload.js"><\/script>
</head>
<body>
<div class="model" style="display: none;">
<video width="100%" controls autoplay></video>
<audio width="100%" controls autoplay></audio>
<img style="max-width: 100%;">
</div>
<center>
<p>Drag & drop videos, songs, or images! <input type="file" multiple></p>
</center>
<script src="https://code.jquery.com/jquery-3.1.0.js"><\/script>
</body>
</html>
</script>
<script id="jsbin-source-javascript" type="text/javascript">const gun = Gun(['https://gunjs.herokuapp.com/gun', 'https://gun-us.herokuapp.com/gun', 'https://gun-eu.herokuapp.com/gun'])
$('html').upload(function resize(eve, up){
if(up){ return up.shrink(eve, resize, 1024) }
var b64 = (eve.base64 || ((eve.event || eve).target || eve).result || eve);
gun.get('test').get(eve.id).put(b64);
});
gun.get('test').map().on(function(data){
if(!data){ return }
var type = data.split(';')[0], ui;
if(type.indexOf('image') + 1){ ui = $("img").get(0) }
if(type.indexOf('video') + 1){ ui = $('video').get(0) }
if(type.indexOf('audio') + 1){ ui = $('audio').get(0) }
if(!ui){ return }
$(ui).clone().prependTo('center').get(0).src = data;
})</script></body>
</html>
const gun = Gun(['https://gunjs.herokuapp.com/gun', 'https://gun-us.herokuapp.com/gun', 'https://gun-eu.herokuapp.com/gun'])
$('html').upload(function resize(eve, up){
if(up){ return up.shrink(eve, resize, 1024) }
var b64 = (eve.base64 || ((eve.event || eve).target || eve).result || eve);
gun.get('test').get(eve.id).put(b64);
});
gun.get('test').map().on(function(data){
if(!data){ return }
var type = data.split(';')[0], ui;
if(type.indexOf('image') + 1){ ui = $("img").get(0) }
if(type.indexOf('video') + 1){ ui = $('video').get(0) }
if(type.indexOf('audio') + 1){ ui = $('audio').get(0) }
if(!ui){ return }
$(ui).clone().prependTo('center').get(0).src = data;
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment