Add preview caption

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

modules/glmv-upl.js

@@ -5,15 +5,30 @@
  * @param {Event} e
  */
 checkForGltf = function (e) {
-    fileName = e.target.value
-    if (fileName.match(/(.gl(?:b|(?:tf))$)/)) {
+    const fileInfo = e.target.files[0]
+    if (fileInfo.name.match(/(.gl(?:b|(?:tf))$)/) && fileInfo.type == 'model/gltf-binary') {
         const mvPreview = document.createElement('model-viewer')
         mvPreview.style['width'] = '180px'
         mvPreview.style['height'] = '180px'
 
+        const dThumbCap = document.createElement('div')
+        dThumbCap.classList.add('thumbcaption')
+
+        const dThumbName = document.createElement('div')
+        dThumbName.classList.add('filename')
+        dThumbName.innerHTML = fileInfo.name
+
+        const dThumbInfo = document.createElement('div')
+        dThumbInfo.classList.add('fileinfo')
+        dThumbInfo.innerHTML = (fileInfo.size / 1024 / 1024).toFixed(1) + 'MB'
+
+        dThumbCap.appendChild(dThumbName)
+        dThumbCap.appendChild(dThumbInfo)
+
         const dThumbIn = document.createElement('div')
         dThumbIn.classList.add('thumbinner')
         dThumbIn.appendChild(mvPreview)
+        dThumbIn.appendChild(dThumbCap)
 
         const dThumb = document.createElement('div')
         dThumb.id = 'glmv-upload-thumbnail'
@@ -28,7 +43,7 @@ checkForGltf = function (e) {
             $('model-viewer').attr('auto-rotate-delay',3000)
             $('model-viewer')[0].toggleAttribute('auto-rotate')
         },{once: true})
-        reader.readAsDataURL(e.target.files[0])
+        reader.readAsDataURL(fileInfo)
     } else {
         $('#glmv-upload-thumbnail').remove()
     }