Upload souboru a jednoduchý progress bar s Naja.js

pavelinnuendo
Člen | 33
+
0
-

Ahoj,

potřeboval bych primitivní progress bar při uploadování souborů pomocí $form->addMultiUpload().

JS mi nejde, s pomocí ChatGPT jsem se po mnoha hodinách experimentování dostal k tomuto kódu, ale ten progress to vůbec nechytne. Máte někdo jednoduché řešení, prosím?

document.addEventListener('DOMContentLoaded', () => {
    const progressBarExtension = {
        initialize(naja) {
            const progressBar = document.getElementById('uploadProgressBar');
            const progressBarContainer = document.getElementById('progressBarContainer');
            const progressPercentage = document.getElementById('progressPercentage');

            naja.addEventListener('start', () => {
                progressBarContainer.style.display = 'block'
            });

            naja.addEventListener('progress', (event) => {
                const percentage = Math.round((event.detail.loaded / event.detail.total) * 100);
                progressBar.value = percentage;
                progressPercentage.textContent = percentage + '%';
            });

            naja.addEventListener('complete', () => {
                progressBarContainer.style.display = 'none'
                progressBar.value = 0;
                progressPercentage.textContent = '0%';
            });
        }
    };

    naja.registerExtension(progressBarExtension);
});
emololftw
Člen | 82
+
+1
-

Ahoj. Nevybavuji si, ze by naja mela progress eventu. Tudy cesta nepovede.

Editoval emololftw (14. 3. 14:49)

mskocik
Člen | 57
+
+1
-

Mozes sa inspirovat tymto clankom https://www.sitepoint.com/…-javascript/ aby si mal predstavu, co vsetko trackovanie uploadu obnasa.

jiri.pudil
Nette Blogger | 1029
+
+2
-

Tak složité, jak popisuje odkazovaný článek, to rozhodně není. Akorát je potřeba obejít Naju – ta totiž využívá moderní Fetch API, které progress tracking bohužel zatím neumí*.

Když použiješ nepřímo XMLHttpRequest, jde to celkem pohodlně.


*) Přesněji řečeno umí, ale (1) nemá to dosud univerzální podporu v prohlížečích a (2) na lepší cestě je zatím podpora pro sledování postupu stahování spíš než nahrávání.

Editoval jiri.pudil (14. 3. 18:04)

Ozzrel
Generous Backer | 52
+
0
-