1 <p><label><input type="checkbox" id="autorename" /> Automatically rename bad or duplicate filenames</p>
3 <input type="file" id="fileinput" multiple="multiple" accept="image/*" />
4 <button id="upload">Upload</button>
7 <table style="margin-top: 1em">
9 <tr><th>Filename</th><th>Size</th><th>Status</th></tr>
17 document.getElementById('upload').addEventListener('click', function() {
18 var files = document.getElementById('fileinput').files;
19 var tbody = document.getElementById('files');
21 for (var i = 0; i < files.length; ++i) {
22 var tr = document.createElement('tr');
24 var td_filename = document.createElement('td');
25 td_filename.appendChild(document.createTextNode(files[i].name));
26 tr.appendChild(td_filename);
28 var td_size = document.createElement('td');
29 td_size.appendChild(document.createTextNode(files[i].size));
30 tr.appendChild(td_size);
32 var td_status = document.createElement('td');
33 tr.appendChild(td_status);
35 tbody.appendChild(tr);
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) {
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);
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) + ' %)';
59 xhr.open("PUT", url, true);
60 xhr.onreadystatechange = function() {
61 if (xhr.readyState != 4) {
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';
70 if (file_index + 1 < files.length) {
71 upload(files, file_index + 1);