Support multiple parallel uploads in the HTML5 interface.
[pr0n] / 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>