git.sesse.net Git - pr0n/blob - templates/default/upload

   1     <p><label><input type="checkbox" id="autorename" /> Automatically rename bad or duplicate filenames</p>
   2     <p>Number of parallel uploads: <input size="2" id="numuploads" value="4" /></p>
   3     <p>
   4       <input type="file" id="fileinput" multiple="multiple" accept="image/*" />
   5       <button id="upload">Upload</button>
   6     </p>
   7
   8     <table style="margin-top: 1em">
   9       <thead>
  10         <tr><th>Filename</th><th>Size</th><th>Status</th></tr>
  11       </thead>
  12       <tbody id="files">
  13       </tbody>
  14     </table>
  15
  16 <script>
  17 //<![CDATA[
  18 var file_index = 0;
  19
  20 document.getElementById('upload').addEventListener('click', function() {
  21         var files = document.getElementById('fileinput').files;
  22         var tbody = document.getElementById('files');
  23         tbody.innerHTML = '';
  24         for (var i = 0; i < files.length; ++i) {
  25                 var tr = document.createElement('tr');
  26
  27                 var td_filename = document.createElement('td');
  28                 td_filename.appendChild(document.createTextNode(files[i].name));
  29                 tr.appendChild(td_filename);
  30
  31                 var td_size = document.createElement('td');
  32                 td_size.appendChild(document.createTextNode(files[i].size));
  33                 tr.appendChild(td_size);
  34
  35                 var td_status = document.createElement('td');
  36                 tr.appendChild(td_status);
  37
  38                 tbody.appendChild(tr);
  39         }
  40         file_index = 0;
  41         var numuploads = parseInt(document.getElementById('numuploads').value);
  42
  43         for (var i = 0; i < numuploads; ++i) {
  44                 upload_next(files);
  45         }
  46 }, false);
  47
  48 var upload_next = function(files) {
  49         if (file_index >= files.length) {
  50                 return;
  51         }
  52
  53         var local_file_index = file_index++;
  54
  55         var file = files[local_file_index];
  56         var url = window.location.origin + '/upload/%EVENT%/';
  57         if (document.getElementById('autorename').checked) {
  58                 url += 'autorename/';
  59         }
  60         url += file.name;
  61         var xhr = new XMLHttpRequest();
  62         var tr = document.getElementById('files').getElementsByTagName('tr')[local_file_index];
  63         var td_status = tr.getElementsByTagName('td')[2];
  64         //var fd = new FormData();
  65         console.log("uploading: " + url);
  66         if (xhr.upload) {
  67                 xhr.upload.addEventListener("progress", function(evt) {
  68                         var kb = Math.floor(evt.loaded / 1024);
  69                         var pct = (100.0 * evt.loaded / evt.total);
  70                         td_status.innerHTML = kb + ' kB (' + pct.toFixed(1) + ' %)';
  71                 });
  72         }
  73         xhr.open("PUT", url, true);
  74         xhr.onreadystatechange = function() {
  75                 if (xhr.readyState != 4) {
  76                         return;
  77                 }
  78                 td_status.innerHTML = '';
  79                 td_status.appendChild(document.createTextNode(xhr.status + ' (' + xhr.responseText + ')'));
  80                 if (xhr.status != 201) {
  81                         td_status.style.color = 'red';
  82                         td_status.style.fontWeight = 'bold';
  83                 }
  84                 upload_next(files);
  85         };
  86         xhr.send(file);
  87 }
  88 //]]>
  89 </script>