Page uploads file twice?

Question

I'm trying to incorporate an upload progress bar to my page.

I have managed to get the progress bar working using this method:

http://www.developphp.com/view.php?tid=1351.

When the user is clicking upload file, the progress bar does the business and shows how much is uploaded and when it is completed.

However when the user then submits the form, the file seems to upload again (chrome shows the file upload info in the bottom left of the screen).

How can I avoid that? Also, how can I get it so I dont have the upload file button?

All I want is the submit button, the progress bar showing progress and then going to a different page once the upload is completed (via some php which does what it needs to do with the POST info)?

My relevant code is below...

<form method="post" action="../../assets/php/actiontest.php" name='mainForm' enctype="multipart/form-data" OnSubmit="return CheckForm()">
    <input type="text" name="Customer" placeholder="Customer" required/><br/>
    <input type="file" name="file1" id="file1"><br/>
    <input type="button" value="Upload File" onclick="uploadFile()" />
    <progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
    <input type="submit" id="submit" />     
</form> 

<script type="text/javascript">
function _(el){
    return document.getElementById(el);
}

function uploadFile(){
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    //ajax.open("POST", "file_upload_parser.php");
    ajax.open("POST", "../../assets/php/actiontest.php");
    ajax.send(formdata);
}

function progressHandler(event){
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
}

function completeHandler(event){
    _("progressBar").value = 0;
}
</script>

Answer 1

Ok here is how I ended up getting around the issue. I removed the form submit button and passed in all of the form values to FormData, all of the POST info then got sent to my PHP script and the php script handled converting that into a PDF.

This way the progress bar shows the progress of all of the form being uploaded after the upload file button is clicked, not just the photo.

<script type="text/javascript">
function _(el){
  return document.getElementById(el);
}
function uploadFile(){
  var form = _("form1"); 
  var file = _("file1").files[0];
  var formdata = new FormData(form);
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  //ajax.open("POST", "file_upload_parser.php");
  ajax.open("POST", "../../assets/php/actiontest.php", true);
  ajax.send(formdata);
}
function progressHandler(event){
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
}
function completeHandler(event){
  _("progressBar").value = 0;
}
</script>

<form method="post" action="actiontest.php" id="form1" name='mainForm' enctype="multipart/form-data" OnSubmit="return CheckForm()">
<input type="text" id="Customer "name="Customer" placeholder="Customer" required/><br>
<input type="file" name="file1" id="file1"><br> 
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
</form>

Answer 2

Obviously, since you first upload it using the javascript, then as a normal form post when the form is submitted. Try clearing and remove the file input after successful javascript upload to prevent it from being uploaded again and maybe even autosubmit the form so the user don't manually have to do it. Try this:

<form method="post" action="../../assets/php/actiontest.php" name="mainForm" name="mainForm" enctype="multipart/form-data" OnSubmit="return CheckForm()">
<input type="text" name="Customer" placeholder="Customer" required/><br>
<input type="file" name="file1" id="file1"><br>
<input type="button" id="uploadButton" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
<input type="submit" id="submit" />     
</form> 

<script type="text/javascript">
function _(el){
  return document.getElementById(el);
}
function uploadFile(){
  var file = _("file1").files[0];
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  //ajax.open("POST", "file_upload_parser.php");
  ajax.open("POST", "../../assets/php/actiontest.php");
  ajax.send(formdata);
}
function progressHandler(event){
  var percent = (event.loaded / event.total) * 100,
      file = _("file1"),
      uploadButton = _("uploadButton"),
      mainForm = _("mainForm");
  _("progressBar").value = Math.round(percent);
  if(percent == 100) {
    file.remove();
    uploadButton.remove();
    mainForm.submit();
  }
}
function completeHandler(event){
  _("progressBar").value = 0;
}
</script>

A better approach might be to both upload the file and send the rest of the form data using javascript and simply skipping the whole submit-phase. Just redirect the user using javascript on success.

Answer 3

Since you have a file input field, when the form is submitted, it is going to take the value in the form and upload it. Resetting file fields with multiple browser support is a pain.

You can try something like this:

• After the file upload is over, remove the element from the DOM and show a link to reset.
• If the user wants to upload another file, he clicks on this link and then introduce a file input field again.

Answer 4

You either need to take the file input out of the form tags, write a custom form submission script, or set the file field to disabled when the submit button is clicked, the latter is probably the best bet