File preview for Elementor form upload field

form-preview.js

document.addEventListener('DOMContentLoaded', function () {
  const fileInput = document.querySelector('input[type="file"]');
  const previewContainer = document.createElement('div');
  
  fileInput.insertAdjacentElement('afterend', previewContainer);

  fileInput.addEventListener('change', function (e) {
    const file = e.target.files[0];
    
    if (file) {
      const reader = new FileReader();
      reader.onload = function (e) {
        previewContainer.innerHTML = `
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <img src="${e.target.result}" alt="${file.name}" style="max-width: 100px; margin-right: 10px;">
            <span>${file.name}</span>
            <span class="remove-btn" style="color: red; cursor: pointer;">X</span>
          </div>
        `;
        
        const removeButton = previewContainer.querySelector('.remove-btn');
        removeButton.addEventListener('click', function () {
          fileInput.value = ''; // Clear the input
          previewContainer.innerHTML = '';
        });
      };
      reader.readAsDataURL(file);
    }
  });
});