'Submit a text string plus file - edited

I am trying to submit a text string (downloadstr) and 1 second later to submit a file. I have to do this in plain JS/HTML (microcontroller webserver)

I submit the text using 'GET' to avoid the 'name=' in the string. I submit the file using POST. I need to access the file locally first to get the file size which is needed in the text string.

I can get it partially working - BUT I cannot seem to change the <input id="DN" .value to the variable 'downloadstr' in JS.

NOTE ***** - There seems to be a problem with the JS variable 'downloadstr'. I can give it any sort of textual value and it will upload fine, but the string ' LOAD(NAND,"EXT/tu480a.ppf?size=641&useack=1"); ' will upload a corrupted string. I cannot see what is wrong with this string. It displays correctly, but will not upload. This is the string that it tries to upload:

LOAD NAND � 2.186360E-77XT0.000000tu480a.ppf0.000000size134219621641 2779096485seack6039898721 %29 B

Can some kind person tell me whats wrong? Thanks. Chris (I've updated via the comments - thanks)

<!DOCTYPE html>
<html>
<body>
 

 <form id="predataform" method="get" action="/index.shtml" accept-charset="utf-8">

  <input id="DN" type="hidden" name="DNDATA" value="xxx">
  <script>
   console.log("downloadstr");
  </script>
 </form>

 <form id="uploadform" action="/index.shtml" enctype="multipart/form-data" method="post">
  <p>Please specify a ppt file to upload :
   <br>
   <input type="file" name="datafilemnu" size="40" onchange="checkFile()">
   <input type="button" value="UPLOAD" name="dnip" onclick="submitboth()">
  </p>
 </form>
 <div>
  <p id="downstring"></p>
  <p id="fsize"></p>

 </div>

 <script>

var downloadstr = "";

document.getElementById("DN").value = downloadstr;
function checkFile() {
 var sFileName = "";
 var sFileExtension = "";
 var iFileSize = 0;
 var iConvert = "";
 var node = "";
 var node_list = document.getElementsByName("datafilemnu");
 for (var i = 0; i < node_list.length; i++) {
  node = node_list[i];
  if (node.getAttribute("type") == "file" && node.files.length > 0) {
   console.log(node.files[0]);
   sFileName = node.value;
   sFileExtension = sFileName.split(".")[sFileName.split(".").length - 1];
   iFileSize = node.files[0].size;
   iConvert = node.files[0].size.toFixed(0);
  }
  if (sFileExtension == "ppf" && iFileSize > 0) {
   document.getElementById("fsize").innerHTML =
    "Size=" +
    iConvert +
    " bytes. Estimated time to download = " +
    ((iConvert * 10) / 115200 / 60).toFixed(1) +
    " minutes ";
   downloadstr =
    'LOAD(NAND,"EXT/' +
    node.files.item(0).name +
    '?size=' +
    iFileSize +
    '&useack=1")';
   document.getElementById("downstring").innerHTML = downloadstr;
   document.getElementById("DN").value = downloadstr;
   console.log(downloadstr);
  }
 }
}

function submitboth() {
 document.getElementById("predataform").submit();

 setTimeout(function () {
  document.getElementById("uploadform").submit();
   window.location.reload();
 }, 1000);
 
}


 </script>
</body>

</html>
javascripthtml


Solution 1:[1]

Thanks everybody. I have found the answer to the main problem of corruption. The webserver itself was converting the '(' to %28 - hex value (and some of the other characters) for some reason when it was being received. I will have to check the webserver code. Sorry to cause so much confusion! However, I have learnt to watch out for miss-spelling in my javascript!!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user1504343

Related Questions