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