pds.dad / at-advent
forked from oppi.li/at-advent
this repo has no description
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

drop zoneeee

phil 528b801c 9782c4c6

+56 -12
+56 -12
shared/challenges_markdown/three/part_two.md
··· 1 + TODO: need to explain what the MST is! 1 2 2 3 make a valid CAR file and upload it 3 4 ··· 7 8 - **Record key:** `3` 8 9 - **Field:** `verificationCode` set to `{{code}}` 9 10 10 - any valid DID will do for the commit 11 - 12 - (TODO: we're not checking the signature, right? are we checking CID?) 11 + any valid DID will do for the commit, and the signature won't be checked 13 12 14 13 <form id="car-upload" method="post" action="/day/3/upload-car" enctype="multipart/form-data"> 15 - <div class="flex items-center gap-4"> 16 - <input type="file" name="car_file" accept=".car" class="file-input file-input-bordered w-full max-w-xs" required /> 17 - <button type="submit" class="btn btn-primary">Inspect your CAR</button> 14 + <div id="drop-zone" style="border: 1px dashed oklch(0.7 0 0); border-radius: 0.5rem; padding: 1.25rem 1.5rem; text-align: center; cursor: pointer; max-width: 28rem;"> 15 + <p id="drop-label" style="display: flex; align-items: center; gap: 0.75rem; margin: 0; opacity: 0.667"> 16 + Drop your car off here <small style="opacity: 0.667">(or click to browse)</small> 17 + </p> 18 + <div id="drop-file-name" class="hidden" style="font-family: monospace; font-size: 0.875rem;"></div> 19 + <input id="car-input" type="file" name="car_file" accept=".car" class="hidden" required /> 18 20 </div> 19 21 </form> 20 22 23 + TODO: remove the "check answer" button 24 + 21 25 <script> 22 - document.getElementById('car-upload').addEventListener('submit', function(e) { 23 - const file = this.querySelector('input[type=file]').files[0]; 24 - if (file && file.size > 2 * Math.pow(2, 20)) { 25 - e.preventDefault(); 26 - alert('Are sending a car or a damn truck??? (max 2MB)'); 26 + (function() { 27 + const form = document.getElementById('car-upload'); 28 + const zone = document.getElementById('drop-zone'); 29 + const input = document.getElementById('car-input'); 30 + const label = document.getElementById('drop-label'); 31 + const fileName = document.getElementById('drop-file-name'); 32 + 33 + function trySubmit(file) { 34 + if (file.size > 2 * Math.pow(2, 20)) { 35 + alert('Are sending a car or a damn truck??? (max 2MB)'); 36 + return; 37 + } 38 + input.files = file instanceof FileList ? file : new DataTransfer().files; 39 + if (!(input.files && input.files[0])) { 40 + // DataTransfer trick didn't work, set via the drop path 41 + } 42 + label.classList.add('hidden'); 43 + fileName.classList.remove('hidden'); 44 + fileName.textContent = 'Uploading ' + file.name + '...'; 45 + form.submit(); 27 46 } 28 - }); 47 + 48 + zone.addEventListener('click', function() { input.click(); }); 49 + 50 + input.addEventListener('change', function() { 51 + if (input.files[0]) trySubmit(input.files[0]); 52 + }); 53 + 54 + zone.addEventListener('dragover', function(e) { 55 + e.preventDefault(); 56 + zone.style.borderColor = 'oklch(0.6 0.2 260)'; 57 + }); 58 + 59 + zone.addEventListener('dragleave', function() { 60 + zone.style.borderColor = 'oklch(0.7 0 0)'; 61 + }); 62 + 63 + zone.addEventListener('drop', function(e) { 64 + e.preventDefault(); 65 + zone.style.borderColor = 'oklch(0.7 0 0)'; 66 + var file = e.dataTransfer.files[0]; 67 + if (file) { 68 + input.files = e.dataTransfer.files; 69 + trySubmit(file); 70 + } 71 + }); 72 + })(); 29 73 </script>