This commit is contained in:
Mark Nadal 2020-05-23 23:30:26 -07:00
parent 47a841fbcd
commit bcad8f7ef3
2 changed files with 21 additions and 14 deletions

View File

@ -1,10 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<center> <div class="model" style="display: none;">
<video width="100%" controls autoplay></video> <video width="100%" controls autoplay></video>
<audio width="100%" controls autoplay></audio> <audio width="100%" controls autoplay></audio>
<img style="max-width: 100%;"> <img style="max-width: 100%;">
<p>Drag & drop videos, songs, or images to upload!</p> </div>
<center>
Drag & drop videos, songs, or images! <input type="file" multiple>
</center> </center>
<script src="../jquery.js"></script> <script src="../jquery.js"></script>
@ -19,16 +21,16 @@ $('html').upload(function resize(eve, up){
return up.shrink(eve, resize, 1024); return up.shrink(eve, resize, 1024);
} }
var b64 = (eve.base64 || ((eve.event || eve).target || eve).result || eve); var b64 = (eve.base64 || ((eve.event || eve).target || eve).result || eve);
gun.get('test').get('paste').put(b64); gun.get('test').get(eve.id).put(b64);
}) });
gun.get('test').get('paste').on(function(data){ gun.get('test').map().on(function(data){
$('video, audio, img').css({display: 'none'})
if(!data){ return } if(!data){ return }
var type = data.split(';')[0], ui; var type = data.split(';')[0], ui;
if(type.indexOf('image') + 1){ ui = $("img") } if(type.indexOf('image') + 1){ ui = $("img").get(0) }
if(type.indexOf('video') + 1){ ui = $('video') } if(type.indexOf('video') + 1){ ui = $('video').get(0) }
if(type.indexOf('audio') + 1){ ui = $('audio') } if(type.indexOf('audio') + 1){ ui = $('audio').get(0) }
($(ui).css({display: 'block'}).get(0)||{}).src = data; if(!ui){ return }
$(ui).clone().prependTo('center').get(0).src = data;
}) })
</script> </script>

View File

@ -1,12 +1,16 @@
;(function(){ ;(function(){
function upload(cb, opt){ function upload(cb, opt){
var el = $(this); cb = cb || function(){}; opt = opt || {}; var el = $(this); cb = cb || function(){};
opt = $.isPlainObject(opt)? opt : {input: opt};
el.on('drop', function(e){ el.on('drop', function(e){
e.preventDefault(); e.preventDefault();
upload.drop(((e.originalEvent||{}).dataTransfer||{}).files, 0); upload.drop(((e.originalEvent||{}).dataTransfer||{}).files||[], 0);
}).on('dragover', function(e){ }).on('dragover', function(e){
e.preventDefault(); e.preventDefault();
}); });
$(opt.input||el).on('change', function(e){
upload.drop((e.target||this||{}).files, 0);
});
upload.drop = function(files,i){ upload.drop = function(files,i){
if(opt.max && (files[i].fileSize > opt.max || files[i].size > opt.max)){ if(opt.max && (files[i].fileSize > opt.max || files[i].size > opt.max)){
cb({err: "File size is too large.", file: file[i]}, upload); cb({err: "File size is too large.", file: file[i]}, upload);
@ -20,6 +24,7 @@
}; };
if(files[i]){ reader.readAsDataURL(files[i]) } if(files[i]){ reader.readAsDataURL(files[i]) }
} }
return this;
} }
upload.shrink = function(e, cb, w, h){ // via stackoverflow upload.shrink = function(e, cb, w, h){ // via stackoverflow
if(!e){ return cb && cb({err: "No file!"}) } if(!e){ return cb && cb({err: "No file!"}) }
@ -37,7 +42,7 @@
canvas.width = w; canvas.width = w;
canvas.height = h; canvas.height = h;
ctx.drawImage(img, 0, 0, w, h); // draw source image to canvas. ctx.drawImage(img, 0, 0, w, h); // draw source image to canvas.
var b64 = e.base64 = canvas.toDataURL(); // base64 the compressed image. var b64 = e.base64 = canvas.toDataURL(); // base64 the shrunk image.
cb((e.base64 && e) || b64); cb((e.base64 && e) || b64);
}; };
} }