HTML5 and Javascript Upload progress bar

Question

Hi there i am working on upload progress bar.

Here is my Javascript code:

<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("upfile_0").files[0];
    //alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("upfile_0", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "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 completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>

Here is my HTML form:

        <form name="form_upload" method="post" enctype="multipart/form-data"  action="[var.path_to_upload_script]" style="margin: 0px; padding: 0px;">
          <noscript><input type="hidden" name="no_script" value="1" /></noscript>
          <input type="hidden" name="title" value="[var.title]" />
    <input type="hidden" name="description" value="[var.description]" />
    <input type="hidden" name="tags" value="[var.tags]" />
    <input type="hidden" name="location_recorded" value="[var.location_recorded]" />
    <input type="hidden" name="allow_comments" value="[var.allow_comments]" />
    <input type="hidden" name="allow_embedding" value="[var.allow_embedding]" />
    <input type="hidden" name="public_private" value="[var.public_private]" />
    <input type="hidden" name="channel" value="[var.channel]" />
    <input type="hidden" name="channel_name" value="[var.channel_name]" />
    <input type="hidden" name="sub_cat" value="[var.sub_cat]" />
    <input type="hidden" name="form_submitted" value="yes" />

    <div id="upload_slots"><span class="font5_16"><b>[var.lang_please_upload]</b></span><input type="file" name="upfile_0" id="upfile_0" /></div>
      <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
      <p id="status"></p>
      <p id="loaded_n_total"></p>
    <input type="submit" value="Upload File" onclick="uploadFile()">
    </form>

When i press the submit button i get an error "Upload Upload Aborted"

If i make my input type from "submit" to "button" the upload progress bar is working, but not submithing the form. If i make my input type from "button" to "submit" the upload progress bar is NOT working but the submit form is submithing.

So how i can make the upload progress bar and the submiting of the form work together?

Thanks in advance!

uploadFile() isn't preventing the form from submitting natively. Look to return false; or event.preventDefault(); (Further reading...) — Moob
– Moob, Commented Nov 6, 2013 at 17:15

Moob · Accepted Answer · 2013-11-06 17:19:22Z

0

Further to my comment. uploadFile() isn't preventing the form from submitting. Use return false; to prevent the event from propagating.

function uploadFile(){
    var file = _("upfile_0").files[0];
    //alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("upfile_0", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
    return false; //Don't continue with the regular form submission
}

answered Nov 6, 2013 at 17:19

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tonny Struck Over a year ago

I placed your code and tried with both input types button and submit and the problem is the same. If input type is button the progress bar is ok, but no submit form. If input type is submit it's submiting the form but no upload progress bar...

Travis J Over a year ago

Close... But you need to handle the returned value. onclick="return uploadFile()"> (this could also be onsubmit in place of onclick since the type is submit).

Tonny Struck Over a year ago

Tryed but it's not working. It's submithing the form but it's not printing the progress bar...

Collectives™ on Stack Overflow

HTML5 and Javascript Upload progress bar

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related