$(function () { status('choose a file'); var timerId; function setTimer() { timerId = setInterval(function () { if ($('#userFileInput').val() !== '') { clearInterval(timerId); $('#uploadForm').submit(); } }, 500); } function setProgress(percent) { $('#percent').html(percent + '%'); $('#bar').css('width', percent + '%'); } setTimer(); $('#uploadForm').submit(function () { status('0%'); var formData = new FormData(); var file = document.getElementById('userFileInput').files[0]; formData.append('userFile', file); var xhr = new XMLHttpRequest(); xhr.overrideMimeType('application/json'); xhr.open('post', '/api/upload', true); xhr.upload.onprogress = function (e) { if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100)); }; xhr.onerror = function (e) { status('error while trying to upload'); }; xhr.onload = function () { $('#userFileInput').val(''); setProgress(0); var resJson = JSON.parse(xhr.responseText); status(resJson.file + ' done, choose a file'); setTimer(); if (resJson.image) window.open('./uploads/' + resJson.savedAs, 'upload', 'status=1, height = 300, width = 300, resizable = 0'); else console.log('not an image'); }; xhr.send(formData); return false; // no refresh }); function status(message) { $('#status').text(message); } function uploadedFilenameList() { var xhr = new XMLHttpRequest(); xhr.open('get', '/api/filenames', true); xhr.onload = function () { var fnames = JSON.parse(xhr.response); fnames.forEach(function (element) { $("#filenames").append("<a href=\"./uploads/" + element + "\" style=\"display: block\">" + element + "</a>"); }); } xhr.send(); } uploadedFilenameList(); });