simplefiles

A lightweight C CGI web application for managing files.
git clone https://scm.kuandu.systems/git-raw/simplefiles.git
Log | Files | Refs | README | LICENSE

upload.html.template (2708B)

      1 <!doctype html>
      2 <html>
      3 <head>
      4   <meta charset="utf-8">
      5   <meta name="viewport" content="width=device-width, initial-scale=1">
      6   <title>SimpleFiles</title>
      7   <link rel="stylesheet" href="style.css">
      8 </head>
      9 <body>
     10   <h1>SimpleFiles</h1>
     11 
     12   <p>Upload a file (max {{MAX_UPLOAD}}, total limit {{REPO_QUOTA}})</p>
     13 
     14   <nav>
     15     <a href="./">Back to files</a>
     16   </nav>
     17 
     18   <form id="uploadForm"
     19         method="post"
     20         action="upload.cgi"
     21         enctype="multipart/form-data">
     22 
     23     <p>
     24       <input type="file" name="file" id="fileInput" required>
     25     </p>
     26 
     27     <p>
     28       <input type="submit" value="Upload">
     29     </p>
     30 
     31   </form>
     32 
     33   <div id="progressContainer" style="display: none">
     34     <progress id="progressBar" value="0" max="100"></progress>
     35     <div id="status">0%</div>
     36   </div>
     37 
     38   <script>
     39     const MAX_UPLOAD = {{MAX_UPLOAD_BYTES}};
     40 
     41     document.getElementById('uploadForm').addEventListener(
     42       'submit',
     43       function (e) {
     44         e.preventDefault();
     45 
     46         const fileInput =
     47           document.getElementById('fileInput');
     48 
     49         if (!fileInput.files.length)
     50           return;
     51 
     52         const file = fileInput.files[0];
     53 
     54         const progressContainer =
     55           document.getElementById('progressContainer');
     56 
     57         const progressBar =
     58           document.getElementById('progressBar');
     59 
     60         const status =
     61           document.getElementById('status');
     62 
     63         if (file.size > MAX_UPLOAD) {
     64           progressContainer.style.display = 'block';
     65           status.textContent =
     66             'File exceeds {{MAX_UPLOAD}} limit';
     67           return;
     68         }
     69 
     70         const formData = new FormData();
     71 
     72         formData.append('file', file);
     73 
     74         progressContainer.style.display = 'block';
     75         progressBar.value = 0;
     76         status.textContent = '0%';
     77 
     78         const xhr = new XMLHttpRequest();
     79 
     80         xhr.open('POST', 'upload.cgi', true);
     81 
     82         xhr.upload.onprogress = function (event) {
     83           if (event.lengthComputable) {
     84             const percent =
     85               Math.round(
     86                 (event.loaded / event.total) * 100
     87               );
     88 
     89             progressBar.value = percent;
     90             status.textContent = percent + '%';
     91           }
     92         };
     93 
     94         xhr.onload = function () {
     95           if (xhr.status >= 200 && xhr.status < 300) {
     96             status.textContent = 'Upload complete';
     97             window.location.href = './';
     98           } else {
     99             status.textContent =
    100               'Upload failed (HTTP ' + xhr.status + ')';
    101           }
    102         };
    103 
    104         xhr.onerror = function () {
    105           status.textContent =
    106             'Upload failed (network error)';
    107         };
    108 
    109         xhr.send(formData);
    110       }
    111     );
    112   </script>
    113 </body>
    114 </html>