How to create an in memory file and upload to server using client side javascript?

Question

I have a test suite written in JavaScript running in a browser that runs on an embedded system. The test suite collects a lot of data and I want to push that to the server. I could use a simple HttpRequest, post-method, but that would require a lot of character escaping to send the content. It would much simpler to upload it to the server as a file using http-file-upload.

Is there a way to create an in memory file and use http-file-upload to push it to a server, using client-side JavaScript?

Since the browser of the embedded system is Ekioh and the system itself is a minimal one, technologies such as flash, JavaApplet, SilverLight are not available. Only pure HTML5 and JavaScript are available.

Answer 1

I think a post would be the better way to do this. Dealing with escaped data is a much easier, more established problem then in-memory files and pushing files to the server with client side javascript. Moreover, escaping data is done for a reason. What you're trying to do is going to welcome a lot of security vulnerabilities.

Try doing something like this. Snippet taken from Write javascript output to file on server

var data = "...";// this is your data that you want to pass to the server (could be json)
//next you would initiate a XMLHTTPRequest as following (could be more advanced):
var url = "get_data.php";//your url to the server side file that will receive the data.
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);//check if the data was revived successfully.
    }
}
http.send(data);

Answer 2

This worked for me. The key part is to create a file and blob. I use angular JS to do the actual http call. However, once you have a file in memory, it shouldn't be too hard to send the data using your http client.

Note: I do the http call to https://httpbin.org/post . This echoes what the server received/parsed, which is useful while iterating to figure your problem out.

function multiPartPost(bodyObj) {
  const url = 'https://httpbin.org/post';

  const bodyJson = JSON.stringify(bodyObj);
  const blob = new Blob([bodyJson], {
    type: 'application/json;charset=UTF-8'
  });
  const fileName = 'jsonAttrs';
  const file = new File([blob], fileName, {type: "text/json;charset=utf-8"});
  const formData = new FormData();
  formData.append(fileName, file);

  return this.$http.post(url, formData, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
  });
}