Cómo agregar barra de progreso con AI Assistant de Wix

TUTORIAL

CODE

$w.onReady(function () {
    $w("#groupBar1").hide();

    $w("#uploadButton1").onChange(async () => {
        const files = $w("#uploadButton1").value;
        if (!files.length) return console.log("No file selected.");

        const file = files[0];
        const fileSizeMB = file.size / (1024 * 1024);
        const uploadSpeedMBps = 1.0; // Simulación: 1 MB/s
        const estimatedTimeMs = (fileSizeMB / uploadSpeedMBps) * 1000;

        console.log(`Uploading file of ${fileSizeMB.toFixed(2)} MB`);
        console.log(`Estimated time: ${(estimatedTimeMs / 1000).toFixed(1)}s`);

        $w("#progressBar1").value = 0;
        $w("#groupBar1").show();
        //   $w("#time").text = "Waiting to start...";

        let startTime;
        let interval;

        try {
            // Inicia la subida real
            const uploadPromise = $w("#uploadButton1").uploadFiles();

            // Simulación comienza aquí, justo cuando empieza la subida
            startTime = Date.now();
            interval = setInterval(() => {
                const elapsed = Date.now() - startTime;
                const progress = Math.min(0.95, elapsed / estimatedTimeMs);
                const secondsLeft = Math.ceil(Math.max(0, (estimatedTimeMs - elapsed) / 1000));

                $w("#progressBar1").value = progress * 100;
                $w("#time").text = secondsLeft > 0 ? `Time: ${secondsLeft}s` : "Finalizing...";
            }, 200);

            const uploadedFiles = await uploadPromise;
            clearInterval(interval);

            $w("#progressBar1").value = 100;
            $w("#time").text = "Completed";

            uploadedFiles.forEach((file) => {
                console.log("Uploaded:", file.fileUrl)
                $w("#videoBox1").src = file.fileUrl;
                $w("#videoBox1").show();
            });
        } catch (err) {
            clearInterval(interval);
            console.error("Upload failed:", err);
            $w("#time").text = "Upload failed";
            $w("#progressBar1").value = 0;
        }
    });
});

#WixTutorial #progressbar #ai #assistant #aiassistant #development #design #pasoapaso #barradeprogreso #wixcode #wixespañol #forms #wixforbeginners #attachment #upload #files