65 - XMLHttpRequest for Upload and Progress

codingforentrepreneurs · Jan 16, 2024 · 468e74e · 468e74e
1 parent 76bb480
commit 468e74e
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 44 deletions.
diff --git a/src/s3/client.py b/src/s3/client.py
@@ -1,6 +1,6 @@
 from dataclasses import dataclass
 import boto3
-
+from botocore.client import Config
 
 @dataclass
 class S3Client:
@@ -25,7 +25,8 @@ def create_s3_client(self):
         return boto3.client(
             's3',
             aws_access_key_id=self.aws_access_key_id,
-            aws_secret_access_key=self.aws_secret_access_key
+            aws_secret_access_key=self.aws_secret_access_key,
+            config=Config(signature_version='s3v4')
         )
 
     # def list_objects(self):

diff --git a/src/static/css/cfehome-ui.css b/src/static/css/cfehome-ui.css
@@ -1559,10 +1559,6 @@ input:checked + .toggle-bg {
   height: 100vh;
 }
 
-.max-h-\[\] {
-  max-height: ;
-}
-
 .max-h-\[80vh\] {
   max-height: 80vh;
 }
@@ -1735,18 +1731,18 @@ input:checked + .toggle-bg {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * 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)));
@@ -2119,19 +2115,14 @@ input:checked + .toggle-bg {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(224 36 36 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .opacity-0 {
@@ -2421,29 +2412,24 @@ input:checked + .toggle-bg {
   color: rgb(63 131 248 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-gray-400) {
+:is(.dark .dark\:text-gray-300) {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-white) {
+:is(.dark .dark\:text-gray-400) {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
 :is(.dark .dark\:text-red-500) {
   --tw-text-opacity: 1;
   color: rgb(240 82 82 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-gray-500) {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-gray-300) {
+:is(.dark .dark\:text-white) {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 :is(.dark .dark\:placeholder-gray-400)::-moz-placeholder {
@@ -2588,18 +2574,10 @@ input:checked + .toggle-bg {
     width: auto;
   }
 
-  .md\:w-48 {
-    width: 12rem;
-  }
-
   .md\:max-w-screen-md {
     max-width: 768px;
   }
 
-  .md\:grow {
-    flex-grow: 1;
-  }
-
   .md\:flex-row {
     flex-direction: row;
   }

diff --git a/src/templates/items/file-upload.html b/src/templates/items/file-upload.html
@@ -5,9 +5,10 @@
 
 <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" />
+            <input type="file" id="file-id" name="file" multiple />
             <button type="submit" id="upload-button" >Upload to S3</button>
         </form>
 
@@ -19,6 +20,19 @@
     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()
@@ -28,22 +42,65 @@
         const file = fileInput.files[0]
         const hxHeaders = document.body.getAttribute('hx-headers')
         const csrfToken = JSON.parse(hxHeaders)['X-CSRFToken'];
-        presignFileForUpload(file, signingEndpoint, 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){
+    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)
-        resetForm()
+        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) {
+    function presignFileForUpload(file, endpoint, csrfToken, callback) {
         const fileName =  file.name 
         const formData = new FormData()
         formData.append("file_name", fileName)
@@ -56,7 +113,7 @@
             }
         }).then(response=>response.json())
         .then(data=>{
-            handleS3Upload(file, data)
+            callback(data)
         }).catch(err=>console.log('err', err))
     }
 </script>