Posting URL-encoded file data with Ajax

Question

Is it possible to do this? In more detail:

I have a file object which I have retrieved from an input element
I want to upload this to the server, together with a couple of key/value pairs with related data (file name, and so on)
I want to do this with Ajax, because everthing else in the system uses Ajax, and I have standardised success/fail handling based on the server response
I want to do this with URL encoding, because the file is small, and the server doesn't implement multipart/form-data

I've tried several different things, but none of them is quite right. This code sends the file data 'as-is' (ie. effectively raw binary, and not as a URL-encoded key-value pair):

   var files = document.getElementById('idUploadBrowseInput').files;
   var fdata = files[0];
   var jqxhr = $.ajax({
      type        : "POST",
      url         : "/cgi-bin/upload_cgi",
      timeout     : 20000,
      processData : false,
      data        : fdata
   }).always(...etc)

Raw binary would be Ok, but I also need the other key-value pairs, and it doesn't seem to be possible to send these at the same time.

If I change the data : fdata line to data : {fdata : fdata} then the POST data just becomes [object Object] (on FF). If I remove the processData:false then I get an exception in jQuery.

The FileReader API has some readAs methods which I guess I should be using - presumably, if I read the file contents into a var, then I can just send the var as part of the data object and it should all just work. However, this is long-winded, and I just want to check that there isn't a more direct way of doing this first.

Note that this post doesn't answer the question.

In short, when using Ajax, can you send a URL-encoded file 'object' as a key-value pair, together with other key-value pairs? — EML, Apr 18 '14 at 22:26
If possible, can post `cgi` pieces ? Please clarify `object` ? Tried `file` `object` as `base64` string ? or `encodeURIComponent(file)` ? Try `Blob` and `FileReder` ? See https://developer.mozilla.org/en-US/docs/Web/API/Blob https://developer.mozilla.org/en-US/docs/Web/API/File http://stackoverflow.com/questions/23140007/how-do-i-read-out-the-first-4-bytes-in-javascript-turn-it-into-an-integer-and-r — guest271314, Apr 18 '14 at 22:38

Xeverous · Answer 1 · 2018-12-21T13:04:02.910

I have managed to send a file using AJAX (and jQuery), there are even 2 different ways of doing it:

const fileInput = document.getElementById('file-upload'); // refers to <input type="file">
const file = fileInput.files[0];

let reader = new FileReader();

reader.onload = function () {
  console.log(reader.result);

  $.ajax({
    type: 'POST',
    url: '/file-upload',

    // data: { file: reader.result }, // #1

    // data: reader.result,           // #2
    // processData: false,

    success: function (response) {
      alert(response);
    }
  });
}

// reader.readAsBinaryString(file); // #1
// reader.readAsArrayBuffer(file);  // #2

The first method sends URL-encoded version of the file. On the server side it looks like this:

POST /file-upload HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Content-Length: 59577
Accept: */*
Origin: http://127.0.0.1:8080
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 OPR/56.0.3051.116
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8080/test
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US;q=0.8,en;q=0.7

file=%00%00%00%02%00%00%00%C3%89%5B%C3%B1%15Y%2B%C3%86%C2%82%04%5C%0A%C2%...

The second method sends the file in it's raw form - the whole content is pure binary data:

POST /file-upload HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Content-Length: 12342
Accept: */*
Origin: http://127.0.0.1:8080
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 OPR/56.0.3051.116
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8080/test
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US;q=0.8,en;q=0.7

É[ñY+Æ\»H*|UÌ¤FÝ▒§®Y3NÙ+2¤"ã0èT...

Note the Content-Length field - the raw form is definitely more optimal but it doesn't let you conveniently send any other key-value pair data like the first form.

Posting URL-encoded file data with Ajax

1 Answers1