Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Uploader</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body> | |
| <div class="pt-1 h-screen bg-white px-2"> | |
| <header class="h-20 flex justify-between items-center py-4 md:py-8 mb-4"> | |
| <!-- logo - start --> | |
| <a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo"> | |
| <svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500"> | |
| <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none"> | |
| <g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g> | |
| </g> | |
| </svg> | |
| Cloud Storage | |
| </a> | |
| <!-- logo - end --> | |
| <!-- nav - start --> | |
| <nav class="hidden lg:flex gap-12"> | |
| <a href="../" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a> | |
| <a href="../list" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a> | |
| <a href="../upload" class="text-indigo-500 text-lg font-semibold">Upload</a> | |
| <a href="../logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a> | |
| </nav> | |
| <!-- nav - end --> | |
| <!-- buttons - start --> | |
| <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5"> | |
| <button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /> | |
| </svg> | |
| Menu | |
| </button> | |
| <a href="../" class="shadow-xl mt-2 hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a> | |
| <a href="../list" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a> | |
| <a href="../upload" class="shadow-xl hidden rounded-t-lg bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a> | |
| <a href="../logout" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a> | |
| </div> | |
| <!-- buttons - end --> | |
| </header> | |
| <div class="max-w-md mx-auto bg-indigo-500 rounded-lg overflow-hidden md:max-w-lg"> | |
| <div class="md:flex"> | |
| <div class="w-full"> | |
| <div class="p-4 border-b-2"> | |
| <span class="text-lg font-bold text-white">Upload documents</span> | |
| </div> | |
| <form action="../uploader/" id="myform" method="POST" enctype="multipart/form-data"> | |
| {% csrf_token %} | |
| <div class="p-3"> | |
| <div class="mb-2"> | |
| <span class="text-sm text-white">Title</span> | |
| <input type="text" id="title" name="title" class="h-12 px-3 w-full border-indigo-200 border rounded focus:outline-none focus:border-indigo-300" /> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-sm text-white">Attachments</span> | |
| <div class="relative h-40 rounded-lg border-dashed border-2 border-gray-500 bg-white flex justify-center items-center hover:cursor-pointer"> | |
| <div class="absolute"> | |
| <div class="flex flex-col items-center" id="Attach"> | |
| <i class="fa fa-cloud-upload fa-3x text-indigo-200"></i> | |
| <span class="block text-indigo-400 font-normal">Attach you files here</span> | |
| <span class="block text-indigo-400 font-normal">or</span> | |
| <span class="block text-blue-400 font-normal">Browse files</span> | |
| </div> | |
| <div class="flex flex-col items-center hidden" id="Fileinfo"> | |
| <i class="fa fa-cloud-upload fa-3x text-indigo-200"></i> | |
| <span class="block text-indigo-800 font-normal" id="name">Attach you files here</span> | |
| <span class="block text-indigo-800 font-normal" id="size">or</span> | |
| <span class="block text-indigo-800 font-normal" id="type">Browse files</span> | |
| </div> | |
| </div> | |
| <input type="file" onchange="showname()" class="h-full w-full m-auto opacity-0" id="file" name="file" action="http://localhost:5000/uploader" method="POST" enctype="multipart/form-data" /> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-center pb-3"> | |
| <input type="submit" id="upload_btn" onclick="loading()" value="Upload" class="w-full h-12 text-lg w-32 hover:bg-white rounded hover:text-indigo-500 bg-indigo-800 text-white" /> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function humanFileSize(bytes, si = false, dp = 1) { | |
| const thresh = si ? 1000 : 1024; | |
| if (Math.abs(bytes) < thresh) { | |
| return bytes + " B"; | |
| } | |
| const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]; | |
| let u = -1; | |
| const r = 10 ** dp; | |
| do { | |
| bytes /= thresh; | |
| ++u; | |
| } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1); | |
| return bytes.toFixed(dp) + " " + units[u]; | |
| } | |
| function showname() { | |
| var name = document.getElementById("file"); | |
| var attach = document.getElementById("Attach"); | |
| var fileinfo = document.getElementById("Fileinfo"); | |
| if (name.files[0].size > 1000000000) { | |
| alert("File size is too large , Limit is 1GB"); | |
| name.value = ""; | |
| } else { | |
| fileinfo.classList.remove("hidden"); | |
| attach.classList.add("hidden"); | |
| document.getElementById("name").innerHTML = name.files[0].name; | |
| document.getElementById("size").innerHTML = humanFileSize(name.files[0].size); | |
| document.getElementById("type").innerHTML = name.files[0].type; | |
| } | |
| } | |
| function loading() { | |
| var upload_btn = document.getElementById("upload_btn"); | |
| upload_btn.value = "Uploading..."; | |
| upload_btn.disabled = true; | |
| var form = document.getElementById("myform"); | |
| form.submit(); | |
| } | |
| </script> | |
| <script> | |
| function inB(event) { | |
| ass = document.getElementById("nav").getElementsByTagName("a"); | |
| for (let i = 0; i < ass.length; i++) { | |
| ass[i].classList.remove("hidden"); | |
| } | |
| } | |
| function outB(event) { | |
| ass = document.getElementById("nav").getElementsByTagName("a"); | |
| for (let i = 0; i < ass.length; i++) { | |
| ass[i].classList.add("hidden"); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |