Files
GlModelViewer/modules/glmv-upl.js
2024-11-12 08:20:00 -07:00

53 lines
1.8 KiB
JavaScript

/**
* 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)