Add model previews on upload (#27)

Closes #22

This modifies the upload form to allow for a preview of models.

Reviewed-on: #27

modules/glmv-upl.js

@@ -0,0 +1,52 @@
+/**
+ * Generate previews when glb or gltf files selected
+ * for upload
+ * 
+ * @param {Event} e
+ */
+checkForGltf = function (e) {
+    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'
+        dThumb.classList.add('thumb', 'tright')
+        dThumb.appendChild(dThumbIn)
+
+        $('#mw-htmlform-source').before(dThumb)
+
+        const reader = new FileReader()
+        reader.addEventListener("load", () => {
+            $('model-viewer').attr('src',reader.result)
+            $('model-viewer').attr('auto-rotate-delay',3000)
+            $('model-viewer')[0].toggleAttribute('auto-rotate')
+        },{once: true})
+        reader.readAsDataURL(fileInfo)
+    } else {
+        $('#glmv-upload-thumbnail').remove()
+    }
+}
+
+$('#wpUploadFile').on('change', checkForGltf)