JetFormbuilder ( Enhanced Media Field in JetFormbuilder with Multiple 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 fileUploadField = $(this);
        var uploadField = fileUploadField.find('.jet-form-builder-file-upload__input');

        uploadField.on('change', function(event) {
            var files = event.target.files;
            var totalFiles = files.length;

            // Remove existing progress bars
            fileUploadField.find('.progress-bar-container').remove();

            $.each(files, function(index, file) {
                var fileName = file.name;
                var fileNumber = index + 1;
                var progressBarContainer = $('<div class="progress-bar-container" data-file-name="' + fileName + '"><div class="progress-bar">0% (' + fileNumber + '/' + totalFiles + ')</div></div>');
                fileUploadField.append(progressBarContainer);
                progressBarContainer.show(); // Show the progress bar when upload begins

                var formData = new FormData();
                formData.append('file', file);

                // AJAX request to upload the file
                $.ajax({
                    url: '/content/plugins/jetformbuilder/includes/file-upload.php', // Adjust the URL
                    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 + '% (' + fileNumber + '/' + totalFiles + ')');
                                progressBarContainer.find('.progress-bar').width(percentage + '%');
                            }
                        }, false);
                        return xhr;
                    },
                    success: function(response) {
                        console.log(response);
                        // Optionally, hide the progress bar on successful upload
                        // progressBarContainer.hide();
                    }
                });
            });
        });

        $(document).on('click', '.jet-form-builder-file-upload__file-remove', function() {
            // Get the file name from the data attribute
            var fileName = $(this).attr('data-file-name');
            // Find and hide the progress bar with the matching data-file-name
            fileUploadField.find('.progress-bar-container[data-file-name="' + fileName + '"]').hide();
        });
    });

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

Thanks for the code. If the progress bars could show up under each uploaded file individually, it would look a lot cleaner.

Thanks for the code. If the progress bars could show up under each uploaded file individually, it would look a lot cleaner.

I think you can tweak the css and you're good to go. Did not try it yet but placement should be a css thing.