uploadimage.gohtml RawHistoryFolder

1<!-- Form to upload a container image (.tar format) -->
2<div
3  class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow"
4  hx-ext="response-targets"
5  hx-boost="true">
6  <div class="flex-grow bg-slate-100 p-4 rounded-md">
7    <h2>Upload Image Containers</h2>
8    <!-- Upload Form -->
9    <form
10      action="/upload"
11      method="post"
12      enctype="multipart/form-data"
13      hx-post="/htmx/upload-image"
14      hx-swap="innerHTML"
15      hx-target="#image-manager"
16      hx-target-*="#error-message-div">
17      <div
18        class="upload-zone w-full h-44 bg-slate-200 rounded-md p-4"
19        hx-drop="true">
20        Drag & Drop your file here or
21        <input
22          type="file"
23          name="file"
24          accept=".tar"
25          class="bg-transparent outline-none" />
26      </div>
27      <input
28        type="submit"
29        value="Upload"
30        _="on click toggle @disabled until htmx:afterOnLoad"
31        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" />
32    </form>
33    <div id="error-message-div" class="text-red-500"></div>
34  </div>
35</div>
36<script>
37  document.body.addEventListener("htmx:afterOnLoad", function (event) {
38    if (
39      event.target.id === "image-manager" &&
40      event.detail.xhr.responseText === "Success"
41    ) {
42      setTimeout(function () {
43        location.reload();
44      }, 3000);
45    }
46  });
47</script>