تغیر بخش آپلود فرم المنتور

تغیر بخش آپلود فرم المنتور

در این آموزش خیلی راحت بخش آپلود فرم المنتور رو خیلی راحت میتونی تغیر بدی

کد js

زبان: JAVASCRIPT
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const fileInputs = document.querySelectorAll('.elementor-field-type-upload input[type="file"]');

    fileInputs.forEach(function (input) {
      const label = document.createElement('label');
      label.className = 'upload-label';
      label.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 16V4m0 0l-4 4m4-4l4 4M4 16v4h16v-4" />
        </svg>
        <span>انتخاب فایل</span>
      `;

      input.style.display = 'none';
      input.parentNode.insertBefore(label, input);

      label.addEventListener('click', () => input.click());

      input.addEventListener('change', function () {
        const span = label.querySelector('span');
        const svg = label.querySelector('svg');

        if (input.files.length > 0) {
          // انیمیشن fade برای متن
          span.classList.add('fade-out');

          setTimeout(() => {
            span.textContent = input.files[0].name;
            span.classList.remove('fade-out');
            label.classList.add('uploaded');

            // آیکن تغییر کنه به تیک ✅
            svg.outerHTML = `
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            `;
          }, 200);
        } else {
          label.classList.remove('uploaded');
          span.textContent = 'انتخاب فایل';
        }
      });
    });
  });
</script>

کد css

زبان: CSS
  .upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.25s ease;
  }

  .upload-label:hover {
    background: #eaeaea;
  }

  .upload-label svg {
    width: 18px;
    height: 18px;
    stroke: #555;
    transition: all 0.3s ease;
  }

  .upload-label.uploaded {
    border-color: #4caf50;
    background: #f0fff4;
    color: #2e7d32;
  }

  .upload-label.uploaded svg {
    stroke: #2e7d32;
    transform: scale(1.2);
  }

  .upload-label span {
    transition: opacity 0.3s ease;
  }

  .fade-out {
    opacity: 0;
  }