get a file as a string using javascript

Question

I have a HTML form to upload a file.

My goal is to submit the form, check that the file has XML extension and get the file as a String into a JavaScript variable.

Then, I want to send a POST request to the server using this String.

Any idea how I can do that?

@Dalorzo: Yes you can ([more](http://stackoverflow.com/questions/3146483/html5-file-api-read-as-text-and-binary/3146509#3146509)). But I don't think the OP really wants to. — T.J. Crowder, Jun 19 '14 at 17:51
@ user: You've said you're "submitting" the form, and that you want to put the form's data into a JavaScript variable. Are you using JavaScript on the server? — T.J. Crowder, Jun 19 '14 at 17:52
For clarification, you want to upload a file to the server, send the data from the file from the server to the client, then send the data from the client back to the server? I'm not sure what your main goal here, but I think your approach might be off. — Smeegs, Jun 19 '14 at 17:52
@ user: ***Please*** don't ask-and-run. Stick around after posting for at least a few minutes to answer people's follow-up questions. — T.J. Crowder, Jun 19 '14 at 18:17

score 1 · Accepted Answer · edited May 23 '17 at 12:09

My goal is to submit the form, check that the file has XML extension and get the file as a String into a JavaScript variable.

I don't think you really mean you want to submit the form (as in, send it to the server) at this stage.

Then, I want to send a POST request to the server using this String.

You can do that on browsers that support the File API, which is most modern ones but not IE8 or IE9. There's an example in this answer.

Basically, you get the File instance from your <input type="file"> element's files list, check its name, read it, and then post it:

Complete Example (source) (other than the POST bit, which I assume you know how to do):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <input type="file">
  <button>Go</button>
<script>
  (function() {
    "use strict";

    // Get our input element and our button; in this example there's
    // just one of each, you'd narrow down these selectors of course
    var inputElement = document.querySelector("input[type=file]"),
        button = document.querySelector("button");

    if (typeof FileReader !== 'function') {
      alert("The file API isn't supported on this browser.");
      inputElement.style.display = button.style.display = "none";
      return;
    }
    if (!inputElement.files) {
      alert("Odd, this browser has FileReader but no `files` property on the input element.");
      inputElement.style.display = button.style.display = "none";
      return;
    }

    button.addEventListener("click", function() {
      var file, filename, reader, filedata;

      // Does it have any files?
      if (inputElement.files.length === 0) {
        alert("No file chosen");
        return;
      }

      // Get its first file
      file = inputElement.files[0];

      // Get its name in lower case
      filename = file.name.toLowerCase();

      // XML extension?
      if (filename.substr(-4) !== ".xml") {
        alert("Please only choose .xml files");
      }
      else {
        // Yes, read it
        reader = new FileReader();
        reader.onload = function() {
          // Get the file data, note that this happens asynchronously
          filedata = reader.result;
          // Send your POST with the data; here, we'll just dump it out
          // as text
          displayXml(filedata);
        };
        reader.readAsText(file); // or you can use readAsBinaryString
      }
    }, false);

    function displayXml(xmlText) {
      var pre = document.createElement('pre');
      pre.innerHTML = xmlText.replace(/&/g, "&amp;").replace(/</g, "&lt;");
      document.body.appendChild(pre);
    }
  })();
</script>
</body>
</html>

get a file as a string using javascript

1 Answers1