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>
4 <input type="file" id="fileinput" multiple="multiple" accept="image/*" />
5 <button id="upload">Upload</button>
8 <table style="margin-top: 1em">
10 <tr><th>Filename</th><th>Size</th><th>Status</th></tr>
20 document.getElementById('upload').addEventListener('click', function() {
21 var files = document.getElementById('fileinput').files;
22 var tbody = document.getElementById('files');
24 for (var i = 0; i < files.length; ++i) {
25 var tr = document.createElement('tr');
27 var td_filename = document.createElement('td');
28 td_filename.appendChild(document.createTextNode(files[i].name));
29 tr.appendChild(td_filename);
31 var td_size = document.createElement('td');
32 td_size.appendChild(document.createTextNode(files[i].size));
33 tr.appendChild(td_size);
35 var td_status = document.createElement('td');
36 tr.appendChild(td_status);
38 tbody.appendChild(tr);
41 var numuploads = parseInt(document.getElementById('numuploads').value);
43 for (var i = 0; i < numuploads; ++i) {
48 var upload_next = function(files) {
49 if (file_index >= files.length) {
53 var local_file_index = file_index++;
55 var file = files[local_file_index];
56 var url = window.location.origin + '/upload/%EVENT%/';
57 if (document.getElementById('autorename').checked) {
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);
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) + ' %)';
73 xhr.open("PUT", url, true);
74 xhr.onreadystatechange = function() {
75 if (xhr.readyState != 4) {
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';