Sending UInt8Array through $.ajax

Question

I'm trying to send compressed data to a server. To do this I'm attempting to pass it into jQuery's ajax function as a UInt8Array. I've based this on a related answer.

But it's not worked. When I look at the content through Wireshark, I see it's tried to do a .toString() on it, getting "[object Uint8Array]". There's very little other info on this around.

var dataCompressed = LZW.compressToByteArray(data);
  $.ajax({
     data: dataCompressed,
     processData: false,
     contentType: "application/octet-stream",
     url: window.localStorage.getItem('servername') + '/Form/SaveData2?formId=' + results.rows.item(x).id,
     headers: { 'Authorization': 'Basic ' + credentials },
     type: "POST",
     async: true,
     success: function (data) {
     }
  });

`$.ajax` is a shortcut for `XMLHttpRequest`, which in reality only supports sending strings. jQuery converts arrays and objects to strings for you, so it has to support converting the data otherwise it won't work, and it probably doesn't support UInt8Array, which means you have to iterate and convert it to a string yourself. — adeneo, Jul 31 '14 at 14:10
@adeneo you can send _Blob_ and _File_ with _XMLHttpRequest_ — Paul S., Jul 31 '14 at 14:24
@user1094553- tried it and it just gives me that string in base64. Which I probably should have realised. — user2564511, Jul 31 '14 at 14:24
@PaulS.- I'm unfamiliar with Blobs, and I get an "Illegal constructor" error on attempting it. I assume I'm doing something wrong, but I'm finishing for the day now. It would be helpful if you could amend my code in an answer- then I can mark it as correct if it works. — user2564511, Jul 31 '14 at 14:24
@user2564511 which browser is giving you an _Illegal constructor_ warning? — Paul S., Jul 31 '14 at 14:37
@PaulS. - Indeed, modern browsers support FormData, which is somewhat an exception to the rule that XMLHttpRequest only accepts strings. — adeneo, Jul 31 '14 at 15:05

score 1 · Answer 1 · edited May 23 '17 at 11:56

1

You need to serialize the ArrayBuffer before jQuery tries to convert it for you. Some examples of how to do this can be seen here.

edited May 23 '17 at 11:56

Community

1
1

answered Jul 31 '14 at 14:12

Tommy Brunn

2,520
2
29
41

score 1 · Answer 2 · answered Jul 31 '14 at 14:32

1

Try creating a Blob,

var blob = new Blob([dataCompressed], {type: "application/octet-stream"});
// ...
    data: blob,

If jQuery is still handling this wrong, you could put this into a FormData

var fd = new FormData();
fd.append('post_field_name', blob, 'optional_file_name');
// ...
    data: fd,

Doing it one of these ways is effectively "POSTing a File with AJAX"

I don't use jQuery so whilst I assume one of the above works I've not tested it. You may find that jQuery doesn't support posting data like this and have to move to a vanilla solution

answered Jul 31 '14 at 14:32

Paul S.

64,864
9
122
138

I've put that in and I'm still getting "Illegal constructor" where it's creating the Blob. That's using a mobile version of Chrome. Looking at MDN, mobile support is spotty, but the whole point of this is to do it for mobile, so I'll need to find an alternative. I'll try for a native solution- jQuery has functions to override how it performs many interactions so I'll look into that. – user2564511 Aug 01 '14 at 08:05

Sending UInt8Array through $.ajax

2 Answers2