rar-autopass/app/web/templates/_upload.html

<div id="import-section">
  {% set pas = 1 %}{% include '_stepper.html' %}
  <div class="card">
    <h2 style="font-size:15px; margin:0 0 12px;">Import fisier (xlsx / csv)</h2>

    {% if message %}
    <div class="flash" style="margin-bottom:12px;">{{ message }}</div>
    {% endif %}

    {% if error %}
    <div class="flash" style="border-color:var(--err); background:#241a1a; margin-bottom:12px;"
         role="alert">{{ error }}</div>
    {% endif %}

    {% if sheets %}
    <div class="flash" style="border-color:var(--warn); background:#201c0f; margin-bottom:12px;">
      Fisierul are mai multe foi de lucru. Alege foaia de mai jos si incarca din nou.
    </div>
    {% endif %}

    <form id="upload-form"
          hx-post="/_import/upload"
          hx-target="#import-section"
          hx-swap="outerHTML"
          hx-encoding="multipart/form-data"
          hx-indicator="#upload-spinner">
      <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">

      {% if sheets %}
      <div style="margin-bottom:12px;">
        <label for="sheet-select"
               style="display:block; margin-bottom:4px; font-size:13px; color:var(--muted);">
          Foaie de lucru
        </label>
        <select id="sheet-select" name="sheet_name" style="min-width:200px;">
          {% for s in sheets %}
          <option value="{{ s }}">{{ s }}</option>
          {% endfor %}
        </select>
      </div>
      {% endif %}

      <div class="drop-zone" id="drop-zone"
           role="region" aria-label="Zona de incarcare fisier">
        {% if not sheets %}
        <p style="font-size:17px; margin:0 0 4px; font-weight:600;">Primul fisier? Trage-l aici.</p>
        <p class="muted" style="margin:0 0 16px; font-size:13px;">xlsx sau csv, max 5000 randuri</p>
        {% else %}
        <p class="muted" style="margin:0 0 16px; font-size:14px;">
          Incarca fisierul din nou dupa ce ai ales foaia.
        </p>
        {% endif %}

        <input id="file-input" type="file" name="file" accept=".xlsx,.xls,.csv"
               style="display:none;" aria-label="Selecteaza fisier xlsx sau csv">
        <button type="button" id="upload-btn"
                style="min-height:44px; padding:10px 24px; font-size:14px;">
          Alege fisier
        </button>
      </div>

      <p class="muted" style="margin:8px 0 0; font-size:12px;">
        NU se trimite nimic la RAR pana confirmi explicit.
      </p>

      <span id="upload-spinner" class="htmx-indicator muted"
            style="font-size:13px; margin-top:6px; display:inline;">
        se parseaza fisierul...
      </span>
    </form>
  </div>
</div>

<script>
(function() {
  var btn = document.getElementById('upload-btn');
  var fi  = document.getElementById('file-input');
  var dz  = document.getElementById('drop-zone');
  var frm = document.getElementById('upload-form');
  if (!btn || !fi || !frm) return;

  btn.addEventListener('click', function() { fi.click(); });

  fi.addEventListener('change', function() {
    if (fi.files.length > 0) frm.requestSubmit();
  });

  dz.addEventListener('dragover', function(e) {
    e.preventDefault();
    dz.classList.add('drag-over');
  });
  dz.addEventListener('dragleave', function(e) {
    if (!dz.contains(e.relatedTarget)) dz.classList.remove('drag-over');
  });
  dz.addEventListener('drop', function(e) {
    e.preventDefault();
    dz.classList.remove('drag-over');
    var f = (e.dataTransfer.files || [])[0];
    if (!f) return;
    try {
      var dt = new DataTransfer();
      dt.items.add(f);
      fi.files = dt.files;
    } catch (_) {}
    frm.requestSubmit();
  });
})();
</script>