Calculate multiple files length for ajax upload progress

Question

I have the following in phpbb posting_attach_body.html which monitors upload progress of files. It works great with one file but if I am trying to upload more than one then it will only calculate the size of the first file and uses that length to show the upload progress bar. How can i change it to calculate and use the total of multiple file uploads instead?

The javascript function *add_more_upload()* is what loads extra form fields to add files to and that works fine allowing multiple uploads.

<div class="panel bg3" id="attach-panel"> <div class="inner"><span class="corners-top"><span></span></span> <p>{L_ADD_ATTACHMENT_EXPLAIN}</p> <fieldset class="fields2"> <dl> <dt><label for="fileupload">{L_FILENAME}:</label></dt> <dd> <!-- IF TESTY --> <input type="url" name="remfile" id="remfile" class="inputbox autowidth" /> Remote File URL<br /> <input type="text" name="altname" id="altname" class="inputbox autowidth" /> Alternative Name<br /> <!-- ENDIF --> <input type="file" name="fileupload" id="fileupload" maxlength="{FILESIZE}" value="" class="inputbox autowidth" /> <input type="button" class="button2" name="files_" value="+" style="width: 40px" onclick="add_more_upload()" title="" /> </dd> </dl> <dl> <dt><label for="filecomment">{L_FILE_COMMENT}:</label></dt> <dd><textarea name="filecomment" id="filecomment" rows="1" cols="40" class="inputbox autowidth">{FILE_COMMENT}</textarea></dd> </dl> <input type="hidden" name="proxid" id="proxid" value="1" /> <div id="multiple"></div> <dl> <dd> <input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="uploadFile(); " /> </dd> </dl> </fieldset> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> <script> function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("fileupload").files[0]; var formdata = new FormData(); formdata.append("fileupload", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); //ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", uploadFile, false); ajax.addEventListener("abort", abortHandler, false); ajax.addEventListener("complete", completeHandler, false); ajax.open("POST","forum/file_upload_parser.php"); ajax.send(formdata); } function progressHandler(event){ _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; } function errorHandler(event){ _("status").innerHTML = "Upload Failed"; } function abortHandler(event){ _("status").innerHTML = "Upload Aborted"; } function completeHandler(event){ _("status").innerHTML = event.target.responseText; _("progressBar").value = 100; _("status").innerHTML = "Upload Complete. Processing File... please wait."; } </script> <span class="corners-bottom"><span></span></span></div> </div>

the add_more_files function :

 function add_more_upload() { var id = document.getElementById('proxid').value ; var div = document.getElementById('multiple'); var childdiv = document.createElement("div"); childdiv.setAttribute('id','multiple'+ id); var html = "<dl><dt><label for='fileupload'>{L_FILENAME}:</label></dt><dd><input type='file' name='fileupload" + id + "' id='fileupload" + id + "' maxlength='{FILESIZE}' value='' class='inputbox autowidth' /><input type='button' class='button2' name='files_" + id + "' value='-' style='width: 40px' onclick='remove_more_upload(" + id + ")' title='' /></dd></dl><dl><dt><label for='filecomment'>{L_FILE_COMMENT}:</label></dt><dd><textarea name='filecomment" + id + "' id='filecomment" + id + "' rows='1' cols='40' class='inputbox autowidth'>{FILE_COMMENT}</textarea></dd></dl>"; childdiv.innerHTML = html; div.appendChild(childdiv) ; document.getElementById('proxid').value++; }

You haven't included the add_more_upload() function, so my answer works without it. — web_bod
– web_bod, Commented Oct 25, 2013 at 19:43

web_bod · Accepted Answer · 2013-10-28 17:49:29Z

It looks like you are only uploading one file at a time : _("fileupload").files[0];

This code will allow you to upload several files at once:

<script> var totalSize = 0; var formdata = new FormData(); function processFiles(ctrl) { // if the control has files if(ctrl.files) { for(var i=0; i < ctrl.files.length; i++) { var file = ctrl.files[i]; totalSize += file.size; formdata.append("fileupload" + i, file); } } } // pass the name of the div holding the file upload controls function uploadFiles(ctrId) { totalSize = 0; formdata = new FormData(); // builds a set of INPUT controls and tries to process any files var uploadControls = document.getElementById(ctrId).getElementsByTagName("INPUT"); for(var i = 0; i< uploadControls.length; i++) { processFiles(uploadControls[i]); } var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.open("POST","forum/file_upload_parser.php"); ajax.send(formdata); } function progressHandler(event) { document.getElementById("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+totalSize; var percent = (event.loaded / totalSize) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; } </script> <div id="fileuploads"> <input type="file" name="fileupload" id="fileupload0" multiple maxlength="{FILESIZE}" value="" class="inputbox autowidth" /> <input type="file" name="fileupload" id="fileupload1" multiple maxlength="{FILESIZE}" value="" class="inputbox autowidth" /> <input type="file" name="fileupload" id="fileupload3" multiple maxlength="{FILESIZE}" value="" class="inputbox autowidth" /> </div> <input type="submit" name="add_file" value="{L_ADD_FILE}" class="button2" onclick="uploadFiles('fileuploads'); " /> <div id="loaded_n_total">waiting...</div>

You will need to pull this into your existing code, it's only intended as a proof of concept to show you a way to track cumulative progress for a set of uploaded files.
If you look at the onClick event for the button - it's the of your file upload control.
Ok when uploading two files it is only picking up one and reporting the size, not the second one. Both files still upload though. I want this to work with a separate upload input area for each file, not using multiple in the input tag. When using multiple in the input tag and selecting two files then yes it reports the sum of both files but unfortunately the add_more_files function does not handle this correctly.
What add_more_files function? you didn't include one in your original question #NotPsychic

Collectives™ on Stack Overflow

Calculate multiple files length for ajax upload progress

1 Answer 1

14 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Related