Last Updated or created 2022-10-12

Februari 2021 i made a website to view images and movies in a browser to do some quick sorting. (borrowed some code from a codepen page i recall correctly)
At the time i didn´t have a good way to view webp webm media.
I wanted to view multiple files at the same time, and make it short and simple.

BTW no webserver needed, just open the file from a directory!
jpg’s png’s webm webp mp4 svg and animated gifs work. (maybe more, didn’t test more, whatever your browser supports)

With recent updates of the chrome browser the video attributes to mute is broken, i so made a workaround.
Also everything is in one file now.
Except for one issue .. i couldn´t create one file for images AND videos.

There is a piece of javascript i could not fix … yet
I have to do execute a document.createElement which is different for images and videos.
Also the attributes of video are mute,autoplay,loop,playinline

Examples:

index.html

<a href="video.html">Video version</a>
<div id="drop-area">
  <form class="my-form">
    <label class="button" for="fileElem">Drop some images</label>
  </form>
  <div id="gallery" /></div>
</div>
<style>
body {
  font-family: sans-serif;
}
#drop-area {
  border: 2px solid #ccc;
}
.my-form {
  margin-bottom: 10px;
}
#gallery {
  margin-top: 10px;
}
#gallery img {
  width: 300px;
}
}
#fileElem {
  display: none;
}
</style>
<script>
let dropArea = document.getElementById("drop-area")
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false)   
  document.body.addEventListener(eventName, preventDefaults, false)
})
;['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false)
})
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
  e.preventDefault()
  e.stopPropagation()
}
function highlight(e) {
  dropArea.classList.add('highlight')
}
function unhighlight(e) {
  dropArea.classList.remove('active')
}
function handleDrop(e) {
  var dt = e.dataTransfer
  var files = dt.files
  handleFiles(files)
}
function handleFiles(files) {
  files = [...files]
  files.forEach(previewFile)
}
function previewFile(file) {
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onloadend = function() {
    let img = document.createElement('img')
    img.src = reader.result
    document.getElementById('gallery').appendChild(img)
  }
}
</script>

video.html

<a href="index.php">Images version</a>
<div id="drop-area">
  <form class="my-form">
    <label class="button" for="fileElem">Drop some videos</label>
  </form>
  <div id="gallery" /></div>
</div>
<style>
body {
  font-family: sans-serif;
}
#drop-area {
  border: 2px solid #ccc;
}
.my-form {
  margin-bottom: 10px;
}
#gallery {
  margin-top: 10px;
}
#gallery video {
  width: 300px;
}
}
#fileElem {
  display: none;
}
</style>
<script>
let dropArea = document.getElementById("drop-area")
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false)   
  document.body.addEventListener(eventName, preventDefaults, false)
})
;['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false)
})
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
  e.preventDefault()
  e.stopPropagation()
}
function highlight(e) {
  dropArea.classList.add('highlight')
}
function unhighlight(e) {
  dropArea.classList.remove('active')
}
function handleDrop(e) {
  var dt = e.dataTransfer
  var files = dt.files
  handleFiles(files)
}
function handleFiles(files) {
  files = [...files]
  files.forEach(previewFile)
}
function previewFile(file) {
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onloadend = function() {
    let video = document.createElement('video')
    video.setAttribute('volume', '0');
    video.setAttribute('height', '300');
    video.setAttribute('autoplay', true);
    video.setAttribute('loop', true);
    video.setAttribute('playsinline', true);
    video.setAttribute('oncanplay', 'this.muted=true');
    video.src = reader.result
    document.getElementById('gallery').appendChild(video)
  }
}
</script>