window.onload = function() {
    const form = document.querySelector('form')

    if (form !== null) {
        const submit = document.querySelector('input[type="submit"]')
        const loading = document.querySelector('.g-Loading')
        const error = document.querySelector('.g-Error')

        function showError(msg) {
            loading.style.display = 'none'
            submit.disabled = false
            error.innerText = msg
            error.style.display = 'block'
        }

        form.onsubmit = function(event) {
            event.preventDefault()

            loading.style.display = 'flex'
            submit.disabled = true
            error.style.display = 'none'

            const key = document.querySelector('input[name="key"]').value
            const expiration = document.querySelector('select[name="expiration"]').value
            const file = document.querySelector('input[name="file"]').files[0]
            const filename = file.name.replace(/[^0-9a-zA-Z\.]/gi, '-')

            // Wait a bit to prevent showing the loader too briefly
            setTimeout(function() {
                const xhr = new XMLHttpRequest()
                xhr.open('POST', '/upload', true)
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        window.location = `/share/${xhr.responseText}`
                    } else {
                        showError(`Error uploading: ${xhr.status}`)
                    }
                }
                xhr.onerror = function () {
                    showError('Upload error')
                }
                xhr.setRequestHeader('X-FileName', filename)
                xhr.setRequestHeader('X-Expiration', expiration)
                xhr.setRequestHeader('X-Key', key)
                xhr.send(file)
            }, 500)
        }
    }
}