happypete Posted March 31, 2019 Share Posted March 31, 2019 Hi, I have an drag and drop image upload script that will process multiple image uploads with PHP, the JS gives a notification of each file uploaded. I want to be able to give an "all files uploaded" notification at the end ... index.php <script src="upload.js"></script> </head> <body> <h2>Upload a new image.</h2> <!-- DROP ZONE --> <div id="uploader"> <div class="drop">Drop Files Here</div> </div> upload.js /* !! UPDATE : AJAX IS ASYNCHRONOUS !! */ /* We do not want users to dump 100 files & upload all at the same time */ /* This will create sort of a queue system & upload one at a time */ var upcontrol = { queue : null, // upload queue now : 0, // current file being uploaded start : function (files) { // upcontrol.start() : start upload queue // WILL ONLY START IF NO EXISTING UPLOAD QUEUE if (upcontrol.queue==null) { // VISUAL - DISABLE UPLOAD UNTIL DONE upcontrol.queue = files; document.getElementById('uploader').classList.add('disabled'); // PROCESS UPLOAD - ONE BY ONE upcontrol.run(); } }, run : function () { // upcontrol.run() : proceed upload file var xhr = new XMLHttpRequest(), data = new FormData(); data.append('file-upload', upcontrol.queue[upcontrol.now]); xhr.open('POST', 'process.php', true); xhr.onload = function (e) { // SHOW UPLOAD STATUS var fstat = document.createElement('div'), txt = upcontrol.queue[upcontrol.now].name + " - "; if (xhr.readyState === 4) { if (xhr.status === 200) { // SERVER RESPONSE txt += xhr.responseText; } else { // ERROR txt += xhr.statusText; } } fstat.innerHTML = txt; document.getElementById('upstat').appendChild(fstat); // UPLOAD NEXT FILE upcontrol.now++; if (upcontrol.now < upcontrol.queue.length) { upcontrol.run(); } // ALL DONE // // // I WANT TO ADD SOME CODE HERE TO CREATE A MESSAGE ON THE INDEX.PHP TO SAY ALL IMAGES UPLOADED // // // else { upcontrol.now = 0; upcontrol.queue = null; document.getElementById('uploader').classList.remove('disabled'); } }; xhr.send(data); } }; Quote Link to comment Share on other sites More sharing options...
requinix Posted March 31, 2019 Share Posted March 31, 2019 Okay, well, else { upcontrol.now = 0; upcontrol.queue = null; document.getElementById('uploader').classList.remove('disabled'); } there's the code that runs when all the files are uploaded, so... put your notification in there. Whatever the notification is, given you didn't post that part. Quote Link to comment Share on other sites More sharing options...
happypete Posted April 1, 2019 Author Share Posted April 1, 2019 Awesome thanks, that's just want I needed to know. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.