event for file upload cancel in javascript

user_1297048 0
Viewed 6962

We can use file.onchange if we gonna set an event callback for file reading using javascript, but how to set event for when user cancel the upload (close the browse panel)?

file-upload javascript
3 Answers

That’s a great solution:

    const createUpload = () => {
        let lock = false
        return new Promise((resolve, reject) => {
            const el = document.createElement('input');
            el.id = +new Date();
            el.style.display = 'none';
            el.setAttribute('type', 'file');
            document.body.appendChild(el)

            el.addEventListener('change', () => {
                lock = true;
                const file = el.files[0];
                resolve(file)
                document.body.removeChild(document.getElementById(el.id));
            }, { once: true })

            window.addEventListener('focus', () => { // file blur
                setTimeout(() => {
                    if (!lock && document.getElementById(el.id)) {
                        reject(new Error('onblur'))
                        document.body.removeChild(document.getElementById(el.id))
                    }
                }, 300)
            }, { once: true })
            el.click() // open file select box
        })
    }

Ussage:

    // $label.classList.add('loading');
    createUpload()
        .then(function (file) {
            // Sent file 
            // $label.classList.remove('loading');           
        })
        .catch(function (err) {
            // Your Cancel Event
            // $label.classList.remove('loading');
        });
user_43094360
Related