bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve progress bar not appearing in upload box

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-09-15 19:31:48 +07:00
parent db79d77d13
commit c566312bb0
15 changed files with 115 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
view/client/file/file_templ.go
View File

@ -38,12 +38,12 @@ func component(title string, files []types.FileData, user types.User) templ.Comp
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <main class=\"flex-grow h-full bg-gray-100\"><div class=\"bg-gray-50 min-h-screen px-4 py-8 sm:px-6 lg:px-8\"><a class=\"inline-flex items-center space-x-2 rounded-md bg-muted px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\" href=\"/user\" hx-get=\"/user\" hx-swap=\"innerHTML\" hx-push-url=\"true\" hx-target=\"#content\" rel=\"ugc\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4\"><path d=\"m12 19-7-7 7-7\"></path> <path d=\"M19 12H5\"></path></svg> <span>Back</span></a><div class=\"mx-auto max-w-7xl\"><div id=\"dropzone-file\" class=\"border-2 border-dashed border-gray-300 rounded-lg p-8 mb-8 text-center hover:bg-gray-200 transition-colors duration-200 ease-in-out cursor-pointer\"><label for=\"file-upload\" class=\"flex flex-col items-center justify-center pt-5 pb-6 cursor-pointer\"><svg class=\"w-12 h-12 mb-4 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"></path></svg><p class=\"mb-2 text-lg text-gray-500 font-semibold\">Click to upload or drag and drop\r</p></label> <input id=\"file-upload\" name=\"file-upload\" type=\"file\" class=\"hidden\"></div><div class=\"overflow-x-auto bg-white shadow-md rounded-lg\"><table class=\"w-full text-sm text-left text-gray-500\"><thead class=\"text-xs text-gray-700 uppercase bg-gray-50\"><tr><th scope=\"col\" class=\"px-6 py-3 w-[40%]\">File Name</th><th scope=\"col\" class=\"px-6 py-3 w-[20%]\">File Size</th><th scope=\"col\" class=\"px-6 py-3 w-[20%]\">Downloads</th><th scope=\"col\" class=\"px-6 py-3 w-[20%]\">Action</th></tr></thead> <tbody>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, file := range files {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr class=\"bg-white border-b\"><td class=\"px-6 py-4 font-medium text-gray-900 whitespace-nowrap flex items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-5 w-5 mr-2 text-green-500\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"></rect> <circle cx=\"9\" cy=\"9\" r=\"2\"></circle> <path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"></path></svg> ")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -56,7 +56,7 @@ func component(title string, files []types.FileData, user types.User) templ.Comp
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td class=\"px-6 py-4\">")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -69,7 +69,7 @@ func component(title string, files []types.FileData, user types.User) templ.Comp
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td class=\"px-6 py-4\"><div class=\"flex items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-5 w-5 mr-2 text-gray-400\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path> <polyline points=\"7 10 12 15 17 10\"></polyline> <line x1=\"12\" x2=\"12\" y1=\"15\" y2=\"3\"></line></svg> ")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -82,7 +82,7 @@ func component(title string, files []types.FileData, user types.User) templ.Comp
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></td><td class=\"px-6 py-4\"><a href=\"")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 5)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -91,12 +91,12 @@ func component(title string, files []types.FileData, user types.User) templ.Comp
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-xs\">Download\r</a></td></tr>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 6)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody></table></div></div></div></main><div id=\"FileUploadBox\"></div><script type=\"text/javascript\">\r\n document.addEventListener(\"dragover\", function (event) {\r\n event.preventDefault();\r\n document.getElementById('dropzone-file').classList.add('bg-gray-100', 'border-blue-500');\r\n });\r\n\r\n ['dragenter', 'dragover'].forEach(eventName => {\r\n document.getElementById('dropzone-file').addEventListener(eventName, highlight, false);\r\n });\r\n\r\n ['dragleave', 'drop'].forEach(eventName => {\r\n document.getElementById('dropzone-file').addEventListener(eventName, unhighlight, false);\r\n });\r\n\r\n function highlight(e) {\r\n document.getElementById('dropzone-file').classList.add('bg-gray-100', 'border-blue-500');\r\n }\r\n\r\n function unhighlight(e) {\r\n document.getElementById('dropzone-file').classList.remove('bg-gray-100', 'border-blue-500');\r\n }\r\n document.addEventListener(\"drop\", async function (event) {\r\n event.preventDefault();\r\n const file = event.dataTransfer.files[0]\r\n await handleFile(file)\r\n });\r\n\r\n document.getElementById('dropzone-file').addEventListener('change', async function(event) {\r\n event.preventDefault();\r\n const file = event.target.files[0]\r\n await handleFile(file)\r\n });\r\n </script>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 7)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}