Why is the uploaded data from FileReader more than the file's length?

Question

I want to use a FileReader to POST an Excel file to my interface. It all works (as in there are no errors), except that the data sent seems to be mangled somewhere. When checking the wire, I can see the POST has a Content-Length of 11910 bytes, while my uploaded file is only 8852 bytes large.

This is the Javascript code:

function readfile() {
    // #excelFile is a simple <input type="file">
    var file = $("#excelFile")[0].files[0];

    var reader = new FileReader();
    reader.addEventListener("load", (event) => {
        restPutPost("post", "rest/mapping", reader.result, 
        function(data) {
            console.log(`File ${file.name} uploaded.`);
        }, 
        function(xhr, status, error) {
            console.log(`Upload failed: ${error}`);
        }, 
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    });

    reader.readAsBinaryString(file);
}

and the restPutPost is a convenience function I wrote:

function restPutPost(method, url, body, callback = null, errorcallback = null, contenttype = "application/json") {
    actualbody = body;
    if (contenttype == "application/json") {
        actualbody = body != null?JSON.stringify(body): null;
    }

    $.ajax({
        type: method,
        url: url,
        headers: {
            Accept: "application/json"
        },
        data: actualbody,
        contentType: contenttype,
        success: function (data) {
            if (callback != null) {
                callback(data);
            }
        },
        error: function (xhr, status, error) {
            if (errorcallback != null) {
                errorcallback(xhr, xhr.status, error);
            }
        }
    });
}

@Barmar I just checked. It is all 8852 bytes. Even `actualbody` has the correct length. — Bart Friederichs, Jan 25 '23 at 19:55
What is the `Content-Transfer-Encoding` header? I suspect it's being converted to base 64. — Barmar, Jan 25 '23 at 19:57
@Barmar yes. And the `Content-Length` in the request header (Chrome 109 on Windows) says 11920 as well. — Bart Friederichs, Jan 25 '23 at 19:58
Can you compare the source and destination files to see what was added? — Barmar, Jan 25 '23 at 20:02
It looks like some UTF-8 encoding is going on or so. I can see an `0xEE9D` bytes in the original being translated to `0xC3AEC2` — Bart Friederichs, Jan 25 '23 at 20:11
From the jQuery website: " Note: The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding." — Bart Friederichs, Jan 25 '23 at 20:14
I had a feeling that's what's going on. See https://stackoverflow.com/questions/19959072/sending-binary-data-in-javascript-over-http — Barmar, Jan 25 '23 at 20:15
@Barmar, thanks. I'll update my code to use Base64, then I'll always be fine. — Bart Friederichs, Jan 25 '23 at 20:16

score 0 · Accepted Answer · answered Jan 26 '23 at 12:22

I ran into a few issues with sending binary data. First, the jQuery XHR does not guarantee the data is untouched. Second, JSON does not support binary data.

So, to fix the issue, I decided to transform the binary data into Base64, and put that into a JSON object:

var obj = {}
obj["exceldata"] = btoa(reader.result);

restPutPost("post", "rest/mapping", obj);

This way, my entire interface stays JSON and I can still send binary data.

Why is the uploaded data from FileReader more than the file's length?

1 Answers1