From f15ab5b4dd3e53403e0749d82983718996f2e2ea Mon Sep 17 00:00:00 2001
From: CodingForEntrepreneurs <hello@teamcfe.com>
Date: Tue, 16 Jan 2024 15:51:13 -0700
Subject: [PATCH] 66 - Upload Form in Item Detail View

---
 src/items/models.py                           |   4 +
 src/items/views.py                            |   2 +
 src/static/css/cfehome-ui.css                 |  32 +++++
 src/templates/items/detail.html               |  13 +-
 src/templates/items/file-upload.html          | 111 +---------------
 .../items/snippets/object-table.html          |  41 +++++-
 src/templates/items/snippets/upload.html      | 123 ++++++++++++++++++
 7 files changed, 206 insertions(+), 120 deletions(-)
 create mode 100644 src/templates/items/snippets/upload.html

diff --git a/src/items/models.py b/src/items/models.py
index 57b068f..5c0bfac 100644
--- a/src/items/models.py
+++ b/src/items/models.py
@@ -53,6 +53,10 @@ def get_files_url(self):
         # return f"/items/{self.id}/"
         return reverse("items:files", kwargs={"id": self.id})
     
+    def get_upload_url(self):
+        # return f"/items/{self.id}/"
+        return reverse("items:upload", kwargs={"id": self.id})
+    
     def get_edit_url(self):
         # return f"/items/{self.id}/"
         return reverse("items:edit", kwargs={"id": self.id})
diff --git a/src/items/views.py b/src/items/views.py
index 41b1aba..25e7c5e 100644
--- a/src/items/views.py
+++ b/src/items/views.py
@@ -41,6 +41,8 @@ def item_upload_view(request, id=None):
     #     detail_url = instance.get_absolute_url()
     #     return redirect(detail_url)
     template_name = 'items/file-upload.html'
+    if request.htmx:
+        template_name = 'items/snippets/upload.html'
     if request.method == "POST":
         print(request.POST)
         file_name = request.POST.get('file_name')
diff --git a/src/static/css/cfehome-ui.css b/src/static/css/cfehome-ui.css
index 0471ae6..ba25d4e 100644
--- a/src/static/css/cfehome-ui.css
+++ b/src/static/css/cfehome-ui.css
@@ -1563,6 +1563,14 @@ input:checked + .toggle-bg {
   max-height: 80vh;
 }
 
+.max-h-\[10vh\] {
+  max-height: 10vh;
+}
+
+.max-h-10 {
+  max-height: 2.5rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1743,6 +1751,12 @@ input:checked + .toggle-bg {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2053,6 +2067,11 @@ input:checked + .toggle-bg {
   line-height: 1rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .font-extrabold {
   font-weight: 800;
 }
@@ -2065,6 +2084,10 @@ input:checked + .toggle-bg {
   font-weight: 600;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -2256,6 +2279,10 @@ input:checked + .toggle-bg {
   text-decoration-line: underline;
 }
 
+.focus\:z-10:focus {
+  z-index: 10;
+}
+
 .focus\:border-0:focus {
   border-width: 0px;
 }
@@ -2527,6 +2554,11 @@ input:checked + .toggle-bg {
   --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity));
 }
 
+:is(.dark .dark\:focus\:ring-gray-700:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:flex-row {
     flex-direction: row;
diff --git a/src/templates/items/detail.html b/src/templates/items/detail.html
index bc5f4d4..a18e366 100644
--- a/src/templates/items/detail.html
+++ b/src/templates/items/detail.html
@@ -4,15 +4,22 @@
 {% block content %}
 
 <div class="flex space-x-4">
-    <div class="grow">
+    <div class="grow space-y-4">
+        <div
+            class="" 
+            hx-get="{{ instance.get_upload_url }}" 
+            hx-trigger="load"></div>
+
         <div
             class="max-h-[80vh] overflow-y-auto" 
             hx-get="{{ instance.get_files_url }}" 
             hx-trigger="load"></div>
     </div>
     <div>
-        <h1>{{ instance.title }}</h1>
-        <h1>{{ instance.get_prefix }}</h1>
+        <h1 class="text-4xl font-extrabold dark:text-white">{{ instance.title }}</h1>
+        {% if instance.description %}
+        <div class="my-4 text-lg text-gray-500">{{ instance.description|linebreaks }}</div>
+        {% endif %}
 
        
 
diff --git a/src/templates/items/file-upload.html b/src/templates/items/file-upload.html
index a5c45f9..aa6d277 100644
--- a/src/templates/items/file-upload.html
+++ b/src/templates/items/file-upload.html
@@ -5,116 +5,7 @@
 
 <div class="flex space-x-4">
     <div class="grow">
-        <div class="hidden upload-progress-display">Loading</div>
-        <form method="post" id="upload-form">
-            <input type="hidden" value="{{ request.build_absolute_uri }}" name="endpoint" />
-            <input type="file" id="file-id" name="file" multiple />
-            <button type="submit" id="upload-button" >Upload to S3</button>
-        </form>
-        
+        {% include 'items/snippets/upload.html' with instance=instance %}
     </div>
 </div>
-
-<script>
-    const uploadForm = document.getElementById('upload-form')
-    if (uploadForm) {
-        uploadForm.addEventListener("submit", handleSubmitEvent)
-    }
-
-    function toggleLoadingDisplay (isLoading){
-        const loadingDisplayElement = document.getElementsByClassName('upload-progress-display')
-        for (let el of loadingDisplayElement) {
-            if (isLoading) {
-                el.classList.remove('hidden')
-            } else {
-                el.classList.add('hidden')
-            }
-
-           
-        }
-    }
-   
-    function handleSubmitEvent(event) {
-        event.preventDefault()
-        const fileInput = uploadForm.querySelector('[name="file"]')
-        const endpointInput = uploadForm.querySelector('[name="endpoint"]')
-        const signingEndpoint = endpointInput.value
-        const file = fileInput.files[0]
-        const hxHeaders = document.body.getAttribute('hx-headers')
-        const csrfToken = JSON.parse(hxHeaders)['X-CSRFToken'];
-        let completedFiles = []
-        for (let file of fileInput.files) {
-            toggleLoadingDisplay(true)
-            presignFileForUpload(file, signingEndpoint, csrfToken, (data)=>{
-                handleS3Upload(file, data, (progressEvent)=>{
-                    console.log(progressEvent)
-                    if (progressEvent.loaded/progressEvent.total > 0.98) {
-                        completedFiles.push(file)
-                    }
-                    if (completedFiles.length == fileInput.files.length) {
-                        resetForm()
-                    }
-                })
-            })
-        }
-    }
-
-    function resetForm(){
-        const uploadForm = document.getElementById('upload-form')
-        toggleLoadingDisplay(false)
-        uploadForm.reset()
-    }
- 
-    function handleS3Upload(file, data, callback){
-        const fileName = data.filename ? data.filename : file.name
-        const newFileObject = new File([file], fileName, {type: file.type})
-        console.log("ready for s3", data, newFileObject)
-        const url = data.url ? data.url : null
-        if (!url) {
-            alert("Error with your request, please try again.")
-            return 
-        } else {
-            // perform the upload to s3 bucket
-            const xhr = new XMLHttpRequest()
-            xhr.open('PUT', url, true)
-            xhr.upload.onprogress = (event) => {
-                callback(event)
-                // setFileUploadState(event)
-            }
-            xhr.onload = function() {
-                // console.log('no error', xhr.status, xhr)
-                // if (xhr.status === 200) {
-                //     resetForm()
-                // } else {
-                //     alert(xhr.statusText)
-                // }
-               
-            }
-            xhr.onerror = function() {
-                // console.log('error', xhr.status)
-                resetForm()
-            } 
-            xhr.setRequestHeader('Content-Type', newFileObject.type)
-            xhr.send(newFileObject)
-            
-        }
-
-    }
-    function presignFileForUpload(file, endpoint, csrfToken, callback) {
-        const fileName =  file.name 
-        const formData = new FormData()
-        formData.append("file_name", fileName)
-        fetch(endpoint,
-            {
-                method: "POST",
-                body: formData,
-                headers: {
-                    "X-CSRFTOKEN": csrfToken,
-            }
-        }).then(response=>response.json())
-        .then(data=>{
-            callback(data)
-        }).catch(err=>console.log('err', err))
-    }
-</script>
 {% endblock content %}
\ No newline at end of file
diff --git a/src/templates/items/snippets/object-table.html b/src/templates/items/snippets/object-table.html
index af4736e..d9ab57b 100644
--- a/src/templates/items/snippets/object-table.html
+++ b/src/templates/items/snippets/object-table.html
@@ -1,12 +1,35 @@
 
+
+
+
+
+<div class="relative overflow-x-auto">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+                <th scope="col" class="px-6 py-3">
+                    File
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Actions
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            
+   
+
 {% for object_dict in object_list %}
+            <tr class="bg-white dark:bg-gray-800">
+                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {% if object_dict.is_image %}
+    <img class="max-h-10" src="{{ object_dict.url }}" />
+    {% endif %}  {{ object_dict.name }}
+   
+                </th>
 
-<div class="mb-5" id="object-{{ forloop.counter }}">
-    {{ object_dict.name }}
-    {% if object_dict.is_image %}
-    <img src="{{ object_dict.url }}" />
-    {% endif %}
-    <a class="hover:pointer font-medium text-blue-600 dark:text-blue-500 hover:underline" href="{{ object_dict.download_url }}">Download</a>
+                <td class="px-6 py-4">
+                    <a class="hover:pointer font-medium text-blue-600 dark:text-blue-500 hover:underline" href="{{ object_dict.download_url }}">Download</a>
     <a class="hover:pointer font-medium text-gray-800 dark:text-gray-300 hover:underline" href="{{ object_dict.url }}">View in Browser</a>
     {% if instance %}
     <button  
@@ -18,6 +41,10 @@
         Delete
     </button>
     {% endif %}
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
 </div>
 
-{% endfor %}
\ No newline at end of file
diff --git a/src/templates/items/snippets/upload.html b/src/templates/items/snippets/upload.html
new file mode 100644
index 0000000..5641431
--- /dev/null
+++ b/src/templates/items/snippets/upload.html
@@ -0,0 +1,123 @@
+<div class="space-y-4">
+    <div class="hidden upload-progress-display">Loading</div>
+    <form class="space-y-2" method="post" id="upload-form">
+        <input type="hidden" value="{{ instance.get_upload_url }}" name="endpoint" />
+        <input type="hidden" value="{{ instance.get_absolute_url }}" name="next" />
+
+    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file-id">Upload files</label>
+    <input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" 
+    required="required"
+    id="file-id" name='file' type="file" multiple>
+
+    <button type="submit" id="upload-button" class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Start Upload</button>
+   
+    </form>
+</div>
+
+
+<script>
+    const uploadForm = document.getElementById('upload-form')
+    if (uploadForm) {
+        uploadForm.addEventListener("submit", handleSubmitEvent)
+    }
+
+    function toggleLoadingDisplay (isLoading){
+        const loadingDisplayElement = document.getElementsByClassName('upload-progress-display')
+        for (let el of loadingDisplayElement) {
+            if (isLoading) {
+                el.classList.remove('hidden')
+            } else {
+                el.classList.add('hidden')
+            }
+
+           
+        }
+    }
+   
+    function handleSubmitEvent(event) {
+        event.preventDefault()
+        const fileInput = uploadForm.querySelector('[name="file"]')
+        const endpointInput = uploadForm.querySelector('[name="endpoint"]')
+        const nextUrl = uploadForm.querySelector('[name="next"]')
+        const signingEndpoint = endpointInput.value
+        const file = fileInput.files[0]
+        const hxHeaders = document.body.getAttribute('hx-headers')
+        const csrfToken = JSON.parse(hxHeaders)['X-CSRFToken'];
+        let completedFiles = []
+        for (let file of fileInput.files) {
+            toggleLoadingDisplay(true)
+            presignFileForUpload(file, signingEndpoint, csrfToken, (data)=>{
+                handleS3Upload(file, data, (progressEvent)=>{
+                    console.log(progressEvent)
+                    if (progressEvent.loaded/progressEvent.total > 0.98) {
+                        completedFiles.push(file)
+                    }
+                    if (completedFiles.length == fileInput.files.length) {
+                        resetForm()
+                        if (nextUrl) {
+                            window.location.replace(nextUrl.value)
+                        }
+                    }
+                })
+            })
+        }
+    }
+
+    function resetForm(){
+        const uploadForm = document.getElementById('upload-form')
+        toggleLoadingDisplay(false)
+        uploadForm.reset()
+    }
+ 
+    function handleS3Upload(file, data, callback){
+        const fileName = data.filename ? data.filename : file.name
+        const newFileObject = new File([file], fileName, {type: file.type})
+        console.log("ready for s3", data, newFileObject)
+        const url = data.url ? data.url : null
+        if (!url) {
+            alert("Error with your request, please try again.")
+            return 
+        } else {
+            // perform the upload to s3 bucket
+            const xhr = new XMLHttpRequest()
+            xhr.open('PUT', url, true)
+            xhr.upload.onprogress = (event) => {
+                callback(event)
+                // setFileUploadState(event)
+            }
+            xhr.onload = function() {
+                // console.log('no error', xhr.status, xhr)
+                // if (xhr.status === 200) {
+                //     resetForm()
+                // } else {
+                //     alert(xhr.statusText)
+                // }
+               
+            }
+            xhr.onerror = function() {
+                // console.log('error', xhr.status)
+                resetForm()
+            } 
+            xhr.setRequestHeader('Content-Type', newFileObject.type)
+            xhr.send(newFileObject)
+            
+        }
+
+    }
+    function presignFileForUpload(file, endpoint, csrfToken, callback) {
+        const fileName =  file.name 
+        const formData = new FormData()
+        formData.append("file_name", fileName)
+        fetch(endpoint,
+            {
+                method: "POST",
+                body: formData,
+                headers: {
+                    "X-CSRFTOKEN": csrfToken,
+            }
+        }).then(response=>response.json())
+        .then(data=>{
+            callback(data)
+        }).catch(err=>console.log('err', err))
+    }
+</script>
\ No newline at end of file