JetFormbuilder media field upload progress indicator

gistfile1.txt

Add the code to your snippet plugins, and create a new HTML snippet then add ( paste ) the code there and save it.
____________________________________________________________


<style>
/* CSS for Progress Bar */
.progress-bar-container {
    display: none; /* Initially hide the progress bar container */
    width: 100%;
    background-color: #eee;
    border-radius: 13px;
    margin-top: 10px;
}

.progress-bar {
    height: 20px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 20px;
    color: white;
    border-radius: 10px;
    transition: width 0.5s ease;
}
</style>

<script>
jQuery(document).ready(function($) {
    $('.jet-form-builder-file-upload__fields').each(function() {
        var uploadField = $(this).find('.jet-form-builder-file-upload__input');
        var progressBarContainer = $('<div class="progress-bar-container"><div class="progress-bar">0%</div></div>');
        $(this).append(progressBarContainer);

        uploadField.on('change', function(event) {
            var files = event.target.files;
            if (files.length > 0) {
                var formData = new FormData();
                formData.append('file', files[0]);

                // AJAX request to upload the file
                $.ajax({
                    url: '/content/plugins/jetformbuilder/includes/file-upload.php',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function(e) {
                            if (e.lengthComputable) {
                                var percentage = Math.round((e.loaded / e.total) * 100);
                                progressBarContainer.find('.progress-bar').text(percentage + '%');
                                progressBarContainer.find('.progress-bar').width(percentage + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    success: function(response) {
                        console.log(response);
                        // Keep the progress bar visible after upload is complete
                    }
                });

                progressBarContainer.show(); // Show the progress bar when upload begins
            }
        });

        $(document).on('click', '.jet-form-builder-file-upload__file-remove', function() {
            progressBarContainer.hide();
            progressBarContainer.find('.progress-bar').width('0%');
            progressBarContainer.find('.progress-bar').text('0%');
            uploadField.val('');
        });
    });

    $('.jet-form-builder__action-button').click(function() {
        $('.progress-bar-container').hide();
    });
});
</script>