{% extends "base.html" %}
{% block title %}Upload files - Uploader{% endblock %}
{% block body %}

<div class="crumbs">
  {% for c in crumbs %}
    {% if not loop.last %}<a href="{{ url_for('index', path=c.path) }}">{{ c.name }}</a> /{% else %}<b>{{ c.name }}</b>{% endif %}
  {% endfor %}
</div>

<div class="panel">
  <h3>Upload files here{% if path %} into <code>{{ path }}</code>{% endif %}</h3>

  <!-- Primary path: a plain multipart form. Works with JavaScript disabled
       and in QtWeb 3.8.5. The drop zone + progress bar below are an optional
       enhancement added by the ES5 script when the browser supports it. -->
  <form id="uploadform" action="{{ url_for('upload') }}" method="post"
        enctype="multipart/form-data">
    <input type="hidden" name="path" value="{{ path }}">
    <div id="dropzone" class="dropzone">
      Drop files here, or choose them below.<br>
      <span class="muted">Maximum total upload: {{ max_upload_h }}</span>
      <div style="margin-top:10px">
        <input type="file" id="fileinput" name="files" multiple>
      </div>
    </div>
    <label>Upload into folder:
      <select name="newfolder">
        <option value="">(current folder{% if path %}: {{ path }}{% else %}: root{% endif %})</option>
        {% for f in folders %}
          <option value="{{ f }}">{{ f }}</option>
        {% endfor %}
      </select>
      <span class="muted">or new name:</span>
      <input type="text" name="newfolder_name" size="14" placeholder="new-folder">
    </label>
    <input type="submit" class="primary" value="Upload">
    <div id="filelist" class="filelist"></div>
    <div id="bar" class="bar"><div id="barfill"></div></div>
    <div id="status" class="muted"></div>
  </form>
</div>

<table class="grid">
<tr>
  <td class="col">
    <div class="panel">
      <h3>Save pasted text as a file</h3>
      <form action="{{ url_for('save_text') }}" method="post">
        <input type="hidden" name="path" value="{{ path }}">
        <label>Filename: <input type="text" name="name" size="24" placeholder="notes.txt"></label>
        <textarea name="text" placeholder="Paste or type text here..."></textarea>
        <label><input type="checkbox" name="overwrite" value="1"> Overwrite if it exists</label>
        <input type="submit" value="Save file">
      </form>
    </div>
  </td>
  <td class="col">
    <div class="panel">
      <h3>Create a folder</h3>
      <form action="{{ url_for('mkdir') }}" method="post">
        <input type="hidden" name="path" value="{{ path }}">
        <label>Name: <input type="text" name="name" size="24" placeholder="photos"></label>
        <input type="submit" value="Create folder">
      </form>
    </div>
    <div class="panel">
      <h3>Summary</h3>
      <div class="muted">
        This folder{{ '' if path else ' (whole tree)' }}: {{ count }} file(s),
        {{ total_h }}.<br>
        <a href="{{ url_for('download_all') }}">Download everything as a .zip</a>
      </div>
    </div>
  </td>
</tr>
</table>

<table class="files">
  <tr>
    <th>Name</th><th>Type</th><th>Size</th><th>Modified</th><th>Actions</th>
  </tr>
  {% if parent is not none %}
  <tr>
    <td colspan="5"><a href="{{ url_for('index', path=parent) }}">&laquo; Up one level</a></td>
  </tr>
  {% endif %}
  {% for e in entries %}
  <tr>
    <td>
      {% if e.is_dir %}
        <a class="folder" href="{{ url_for('index', path=e.path) }}">{{ e.name }}/</a>
      {% else %}
        <a href="{{ url_for('view', path=e.path) }}">{{ e.name }}</a>
      {% endif %}
    </td>
    <td class="kind">{{ 'folder' if e.is_dir else e.kind }}</td>
    <td class="size">{{ '' if e.is_dir else e.size_h }}</td>
    <td class="size">{{ e.mtime }}</td>
    <td class="actions">
      {% if not e.is_dir %}
        <a href="{{ url_for('download', path=e.path) }}">Download</a>
      {% endif %}
      <a href="{{ url_for('delete', path=e.path) }}">Delete</a>
    </td>
  </tr>
  {% endfor %}
  {% if not entries %}
  <tr><td colspan="5" class="muted">Nothing here yet. Upload a file above.</td></tr>
  {% endif %}
</table>

<script>
/* Optional ES5 enhancement. The plain form above always works without it.
   Runs only if the browser has FormData + XMLHttpRequest2 + File API. */
(function () {
  "use strict";
  function addEvt(el, type, fn) {
    if (!el) { return; }
    if (el.addEventListener) { el.addEventListener(type, fn, false); }
    else if (el.attachEvent) { el.attachEvent("on" + type, fn); }
  }
  function human(n) {
    var units = ["B", "KB", "MB", "GB"], i = 0;
    n = Number(n) || 0;
    while (n >= 1024 && i < units.length - 1) { n = n / 1024; i++; }
    return (i === 0 ? n : n.toFixed(1)) + " " + units[i];
  }
  var form = document.getElementById("uploadform");
  var input = document.getElementById("fileinput");
  var zone = document.getElementById("dropzone");
  var list = document.getElementById("filelist");
  var bar = document.getElementById("bar");
  var fill = document.getElementById("barfill");
  var status = document.getElementById("status");
  if (!form || !input || !zone) { return; }

  /* Show the chosen file names + sizes when the File API is available. */
  function renderList(files) {
    if (!list) { return; }
    while (list.firstChild) { list.removeChild(list.firstChild); }
    if (!files || !files.length) { return; }
    for (var i = 0; i < files.length; i++) {
      var row = document.createElement("div");
      var label = String(files[i].name);
      if (typeof files[i].size === "number") {
        label += " (" + human(files[i].size) + ")";
      }
      row.appendChild(document.createTextNode(label));
      list.appendChild(row);
    }
  }
  addEvt(input, "change", function () { renderList(input.files); });

  /* Drag & drop with an XHR progress bar, only if XHR2 upload is available. */
  var probe = window.XMLHttpRequest ? new window.XMLHttpRequest() : null;
  var canXhr = !!(window.FormData && probe && probe.upload);
  if (!canXhr) {
    return; /* QtWeb 3.8.5 lands here - the normal form is used. */
  }

  addEvt(zone, "dragover", function (e) {
    if (e && e.preventDefault) { e.preventDefault(); }
    zone.className = "dropzone hot";
  });
  addEvt(zone, "dragleave", function () { zone.className = "dropzone"; });
  addEvt(zone, "drop", function (e) {
    e = e || window.event;
    if (e.preventDefault) { e.preventDefault(); }
    zone.className = "dropzone";
    var dt = e.dataTransfer;
    if (!dt || !dt.files || !dt.files.length) { return; }
    renderList(dt.files);
    var fd = new window.FormData();
    var pathField = form.elements["path"];
    var newName = form.elements["newfolder_name"];
    var folderSel = form.elements["newfolder"];
    fd.append("path", pathField ? pathField.value : "");
    fd.append("newfolder_name", newName ? newName.value : "");
    fd.append("newfolder", folderSel ? folderSel.value : "");
    for (var i = 0; i < dt.files.length; i++) { fd.append("files", dt.files[i]); }
    var xhr = new window.XMLHttpRequest();
    if (xhr.upload) {
      xhr.upload.onprogress = function (ev) {
        if (ev.lengthComputable && fill) {
          bar.style.display = "block";
          fill.style.width = Math.round(ev.loaded / ev.total * 100) + "%";
        }
      };
    }
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) { return; }
      if (status) {
        status.innerHTML = (xhr.status >= 200 && xhr.status < 400)
          ? "Upload complete. Reloading..."
          : "Upload failed (HTTP " + xhr.status + ").";
      }
      if (xhr.status >= 200 && xhr.status < 400) {
        window.location.reload();
      }
    };
    xhr.open("POST", form.action, true);
    xhr.send(fd);
  });
})();
</script>

{% endblock %}