Add a very simple HTML5 uploader.
[pr0n] / 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 + '/webdav/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>