Skip to content

Instantly share code, notes, and snippets.

@kig
Last active November 14, 2023 02:02
Show Gist options
  • Save kig/38958f6b900896973c6a244ee36d93ca to your computer and use it in GitHub Desktop.
Save kig/38958f6b900896973c6a244ee36d93ca to your computer and use it in GitHub Desktop.
about:blank file viewer. Copy-paste this into the console, then drop files into the page to view them.
let d=document.body,n='\n',f=d.ondragover=e=>e.preventDefault();d.style.whiteSpace='pre';d.ondrop=e=>[f(e)].map.call(e.dataTransfer.files,f=>{e=new Audio(URL.createObjectURL(f));e.controls=e.loop=1;d.append(f.name+n,e,n+n)})
// file_viewer.js
// This is a simple file viewer that allows you to drag and drop files onto the page and view them.
Object.assign(document.body.style, {
fontFamily: 'sans-serif',
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
gridGap: '1em'
});
const fullScreenStyle = {
position: 'fixed',
objectFit: 'contain',
background: '#fff',
top: '0', left: '0', width: '100%', height: '100%', zIndex: '1000',
};
const regularStyle = {position: 'static', width: 'auto', height: 'auto'};
const fileView = function(name, element) {
const el = document.createElement('div');
const nameEl = document.createElement('div');
nameEl.innerText = name;
el.append(nameEl, element);
return el;
}
const stopOthers = function() {
Array.from(document.querySelectorAll('video, audio')).forEach(el => {
if (el !== this) el.pause();
});
};
const handleNextPlay = function() {
const els = Array.from(document.querySelectorAll('video, audio'));
const next = els[(els.indexOf(this) + 1) % els.length];
next.currentTime = 0;
if (document.fullscreenElement === this) {
if (!this.origSrc) this.origSrc = this.src;
// When we leave fullscreen, we need to reset the src to the origSrc.
this.onfullscreenchange = () => {
if (document.fullscreenElement !== this) this.src = this.origSrc;
};
this.src = next.src;
this.play();
} else {
next.play();
}
};
document.body.addEventListener("dragover", (ev) => ev.preventDefault());
document.body.addEventListener('drop', ev => {
ev.preventDefault();
Array.from(ev.dataTransfer.files).forEach(f => {
let type = f.type.replace(/^image/, 'img').split("/")[0];
if (!/^(video|audio|img)/.test(type)) type = 'iframe';
let el = document.createElement(type);
el.src = URL.createObjectURL(f);
el.playsInline = true;
el.controls = true;
el.onplay = stopOthers;
el.onended = handleNextPlay;
el.style.maxWidth = '100%';
if (type === 'iframe') {
const iframe = el;
Object.assign(iframe.style, {
width: '100%',
background: '#fff',
border: '1px solid #eee',
});
const container = document.createElement('div');
// Add a fullscreen button to the iframe.
const fs = document.createElement('button');
fs.innerText = 'Toggle Fullscreen';
fs.onclick = () => {
if (container.style.position === 'fixed') {
Object.assign(container.style, regularStyle);
Object.assign(iframe.style, {width: '100%', height: 'auto'});
return;
}
Object.assign(container.style, fullScreenStyle);
Object.assign(iframe.style, {width: '100%', height: 'calc(100% - 2em)'});
}
container.append(iframe, fs);
el = container;
} else if (type === 'img') {
el.onclick = () => {
if (el.style.position === 'fixed') {
Object.assign(el.style, regularStyle);
return;
}
Object.assign(el.style, fullScreenStyle);
};
}
document.body.append(fileView(f.name, el));
});
});
let d=document,b=d.body,n='\n',c='create',f=b.ondragover=e=>e.preventDefault();b.style.whiteSpace='pre';b.ondrop=e=>[f(e)].map.call(e.dataTransfer.files,f=>{e=d[c+'Element'](f.type.split("/")[0].replace('image','img'));e.src=URL[c+'ObjectURL'](f);e.style.width='25%';e.controls=e.loop=1;b.append(f.name+n,e,n+n)})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment