JetFormBuilder media field, enhanced choose file

gistfile1.txt

UPDATED: 19.02.2025

I have  made a few changes to original snippet:

Change 1. Now also shows the upload count in the file upload button
Change 2. Brings the submit buttion inside the file upload form.
Change 3. Hides submit button on click 
Change 4. Adds loading animation while file is uploading. 
Change 5. Shows file size count for selected files.



1. We've enhanced the JetFormBuilder with a refined custom code, improving both style and functionality for file selection. The latest
update introduces support for the repeater field's media capabilities, offering a more streamlined and efficient user experience for
handling multiple files within forms.

2. Copy this code, create a new HTML snippet, and paste it into your snippet plugin. Save it as a header or footer.


<style>

/* Custom styles for the file upload field */
.jet-form-builder__field-wrap.jet-form-builder-file-upload {
    background: #ecf6ff !important;
    border: 3px dashed #c7d4e1 !important;
    padding: 20px !important;
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 6px !important;
}

/* File Upload Button */
.addfile {
    padding: 10px 20px;
    background-color: #50BED7 !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    margin-top: 10px;
    transition: background 0.3s ease, transform 0.3s ease;
    width: 100%;
    max-width: 250px;
    text-align: center;
}

.addfile:hover {
    background-color: #80D3E3 !important;
}

/* Submit Button */
.jet-form-builder__submit {
    padding: 10px 20px;
    background-color: #FE39A4 !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    border-radius: 6px;
    margin-top: 15px;
    transition: background 0.3s ease, transform 0.3s ease;
    width: 100% !important;  
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
}

.jet-form-builder__submit:hover {
    background-color: #FE6BBF !important;
}

/* Loader animation */
.loader {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    display: none;
    margin-top: 20px; /* Added space above loader */
}

.loader:before, .loader:after {
    content: '';
    width: 15px;
    height: 15px;
    display: inline-block;
    position: relative;
    margin: 0 5px;
    border-radius: 50%;
    color: #FFF;
    background: currentColor;
    box-shadow: 50px 0, -50px 0;
    animation: left 1s infinite ease-in-out;
}

.loader:after {
    color: #FE39A4;
    animation: right 1.1s infinite ease-in-out;
}

@keyframes right {
    0%, 100% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
}

@keyframes left {
    0%, 100% { transform: translateY(10px); }
    50% { transform: translateY(-10px); }
}

/* File size info */
.file-size-info {
    font-size: 12px;
    color: #333;
    margin-top: 5px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const { addAction } = window.JetPlugins.hooks;

    addAction('jet.fb.input.makeReactive', 'set-upload-labels', function(input) {
        if (!input?.nodes?.length || !input.nodes[0].classList.contains('jet-form-builder-file-upload__input')) {
            return;
        }

        const $ = jQuery;
        const upload = $(input.nodes[0]);
        const fields = upload.closest('.jet-form-builder-file-upload__fields');

        if (!fields.find('.addfile').length) {
            fields.append(`<input type="button" class="addfile" value="Choose File"/>`);
        }

        // Ensure "Total file size" always appears below "Maximum file size"
        let maxFileSizeInfo = fields.find('.jet-form-builder-file-upload__max-size');
        if (!fields.find('.file-size-info').length) {
            const fileSizeHTML = `<div class="file-size-info">Total file size: 0MB</div>`;

            if (maxFileSizeInfo.length) {
                maxFileSizeInfo.after(fileSizeHTML); // If "Maximum file size" exists, place it below
            } else {
                fields.append(fileSizeHTML); // Otherwise, just append it to the field
            }
        }

        const buttonAdd = fields.find('.addfile');
        const fileSizeInfo = fields.find('.file-size-info');
        upload.css('display', 'none');

        buttonAdd.click(function() {
            upload.trigger('click');
        });

        function updateFileLabel() {
            const files = upload[0].files;
            let totalFileSize = 0;
            
            for (let i = 0; i < files.length; i++) {
                totalFileSize += files[i].size;
            }

            fileSizeInfo.text(`Total file size: ${(totalFileSize / (1024 * 1024)).toFixed(2)}MB`);

            const fileCount = files.length;
            if (fileCount > 0) {
                buttonAdd.val(`${fileCount} Files Uploaded`);
            } else {
                resetFileLabel();
            }
        }

        function resetFileLabel() {
            const remainingFiles = $('.jet-form-builder-file-upload__file').length;
            if (remainingFiles > 0) {
                buttonAdd.val(`${remainingFiles} Files Uploaded`);
            } else {
                buttonAdd.val('Choose File');
            }
        }

        upload.on('change', updateFileLabel);

        $(document).on('click', '.jet-form-builder-file-upload__file-remove', function() {
            setTimeout(() => {
                resetFileLabel();
                updateFileLabel();
            }, 100);
        });

        let form = upload.closest('.jet-form-builder');
        let submitButtonWrapper = form.find('.jet-form-builder__submit-wrap');
        let submitButton = submitButtonWrapper.find('button.jet-form-builder__submit');

        if (!fields.find('.jet-form-builder__submit-wrap').length) {
            fields.append(submitButtonWrapper);
        }

        function adjustButtonWidth() {
            submitButton.css({
                width: `100%`,  
                maxWidth: `100%`
            });
        }

        adjustButtonWidth();
        $(window).on('resize', adjustButtonWidth);

        if (!fields.find('.loader').length) {
            fields.append('<div class="loader"></div>');
        }

        const loader = fields.find('.loader');

        submitButton.on('click', function() {
            $(this).closest('.jet-form-builder__submit-wrap').hide();
            loader.show();
        });

        upload.on('change', function() {
            updateFileLabel();
        });

        $(document).on('jet-form-builder.success', function() {
            submitButtonWrapper.show();
            loader.hide();
        });
    });
});
</script>