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.

No javascript libraries such as JQuery. Could possibly introduce pure JavaScript libs if warranted. Otherwise I can always use the same technique as in the lib. — Zen, Jul 11 '13 at 13:59
Not quite a duplicate, but very similar to this SO question: http://stackoverflow.com/questions/17300796/import-to-notepad-using-jquery/17301248#17301248 Follow the same technique for making the file, then as you said, use http file upload to upload it. — Scott Mermelstein, Jul 11 '13 at 14:36

score 1 · Answer 1 · edited May 23 '17 at 10:32

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);

Thanks for your reply. It gave me the hints I needed to find the solution on my own. I haven't implemented it yet, other things came in the way, but once I do, I'll post the solution here. Once again, thanks for the hints that put me on the right track. — Zen, Sep 04 '13 at 18:44

thebiggestlebowski · Answer 2 · 2022-12-15T07:50:45.753

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}
  });
}

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

2 Answers2