Upload binary file using XMLHttpRequest and FileReader whyle setting custom content-type and boundary

Question

I'm trying to upload a (DICOM) binary file to the server using XMLHttpRequest and FileReader.

According to DICOM-standard as Content-Type muss be multipart/related;type=application/dicom defined and in the Request Payload must be the Content-Type:application/dicom again, I have managed to build that structure somehow with this code:

    let boundary = Math.random().toString().substr(2);
    let reader = new FileReader();
    reader.readAsBinaryString(fileList[0]);

    reader.onload = function(e) {

        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.open("POST", "myurl", true);
        var dashes = '--';
        var crlf = "\r\n";
        if ( fileList[0].type == '' ){
            filetype = 'application/dicom';
        } else {
            filetype = fileList[0].type;
        }
        let content = e.target["result"];
        var data = dashes + boundary + crlf + "Content-Type: " + filetype + crlf + crlf + content + crlf + dashes + boundary + dashes;
        xmlHttpRequest.setRequestHeader("Content-Type", "multipart/related;type=application/dicom;boundary=" + boundary+";");
        xmlHttpRequest.setRequestHeader("Accept", "application/dicom+json");
        xmlHttpRequest.send(data);
    }; xmlHttpRequest.send(data);
        };

The problem with that approach is that it seems that XMLHttpRequest makes an UTF-8 encoding and that's corrupting the binary data (see this post).

The questions are how can use reader.readAsArrayBuffer() and set the body content-type and boundary? or
How can I prevent XMLHttpRequest to make UTF-8 encoding?

My second question is how to handle the big files (about 1 TB) with this approach?

Sheki · Accepted Answer · 2017-06-06 11:27:25Z

I found an answer to my (first part) question thanks to this post, hier is my code now:

var boundary = Math.random().toString().substr(2);
var reader = new FileReader();
reader.readAsArrayBuffer(fileList[0]);
reader.onload = function(e) {
    var xmlHttpRequest = new XMLHttpRequest();
    xmlHttpRequest.open("POST", "myurl", true);
    var dashes = '--';
    var crlf = "\r\n";
    if ( fileList[0].type == '' ){
        filetype = 'application/dicom';
    } else {
        filetype = fileList[0].type;
    }
    var content = e.target["result"];
    var dataView = new DataView(e.target["result"]);
    var postDataStart = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + encodeURIComponent(fileList[0].name) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf;
    var postDataEnd = crlf + dashes + boundary + dashes;
    var size = postDataStart.length + dataView.byteLength + postDataEnd.length;
    var uint8Array = new Uint8Array(size);
    var i = 0;

    for (; i < postDataStart.length; i++) {
          uint8Array[i] = postDataStart.charCodeAt(i) & 0xFF;
    }
    for (let j = 0; j < dataView.byteLength; i++, j++) {
          uint8Array[i] = dataView.getUint8(j);
    }
    for (let j = 0; j < postDataEnd.length; i++, j++) {
         uint8Array[i] = postDataEnd.charCodeAt(j) & 0xFF;
    }
    var payload = uint8Array.buffer;
    xmlHttpRequest.setRequestHeader("Content-Type", "multipart/related;type=application/dicom;boundary=" + boundary+";");
    xmlHttpRequest.setRequestHeader("Accept", "application/dicom+json");
    xmlHttpRequest.send(payload);
};

EDIT:

I found another solution that's working with bigger files as the available RAM and that is streaming the file and not loading first all in RAM:

    var boundary = Math.random().toString().substr(2);
    var xmlHttpRequest = new XMLHttpRequest();
    xmlHttpRequest.open("POST", "myurl", true);
    var dashes = '--';
    var crlf = "\r\n";
    filetype = fileList[0].type;

    var postDataStart = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + encodeURIComponent(fileList[0].name) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf;
    var postDataEnd = crlf + dashes + boundary + dashes;

    xmlHttpRequest.setRequestHeader("Content-Type", "multipart/related;type=application/dicom;boundary=" + boundary+";");
    xmlHttpRequest.setRequestHeader("Accept", "application/dicom+json");
    xmlHttpRequest.send(new Blob([new Blob([postDataStart]),fileList[0], new Blob([postDataEnd])]));

Collectives™ on Stack Overflow

Upload binary file using XMLHttpRequest and FileReader whyle setting custom content-type and boundary

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related