Sending binary with virtual form: FormData();

Sending decoded base64 as binary data to PHP server. Constructing multipart POST by FormData(); Binary data sent as Blob

by dshilkret

HTML

<form>
    <input type="file" onchange="handleFiles(this.files)" id="input" />
</form>
<button onclick="sendFile()"> Send to PHP server</button>
<pre id="b64"></pre>

JavaScript

var postTarget = "http://localhost/recording/FlashWavRecorder"+
    "/FlashWavRecorder/html/upload.php";
var pre = document.getElementById('b64');
var b64;

function log(text) {
    pre.innerText = pre.innerText + "\n\n" + text;
}



var file;
window.handleFiles = function (files) {
    var fr = new FileReader();
    fr.onload = function (ofre) {
        b64 = ofre.target.result;
        log(b64);
    };
    fr.readAsDataURL(files[0]);
    file = files[0];
}

window.sendFile = function() {
    var splittedB64 = b64.split(',')[1];
    var blob = b64toBlob(splittedB64, "audio/wav");
    
    var fd = new FormData();
    fd.append('format', 'json');
    fd.append("upload_file[filename]", blob, "example.wav");
    var xhr = new XMLHttpRequest();
    xhr.onerror = function() {};
    xhr.onload = function() {};
    xhr.open("POST", postTarget, true);
    xhr.send(fd);
}

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}