Send raw data to PHP via XMLHttpRequest

Question

I am selecting a file and sending it through XMLXttpRequest like this :

var upload_form = $('#upload_form'),
        file_input = $('#file_input'),
        file_list = $('#file_list'),
        submit_btn = $('#submit_btn'),
        uploaders = [];

    file_input.on('change', onFilesSelected);
    upload_form.on('submit', onFormSubmit);


    /**
     * Loops through the selected files, displays their file name and size
     * in the file list, and enables the submit button for uploading.
     */
    function onFilesSelected(e) {
        var files = e.target.files,
            file,
            list_item,
            uploader;

        for (var i = 0; i < files.length; i++) {
            file = files[i];
            uploader = new ChunkedUploader(file);
            uploaders.push(uploader);
            list_item = $('<li>' + file.name + '(' + file.size.formatBytes() + ') <button>Pause</button></li>').data('uploader', uploader);
            file_list.append(list_item);
        }

        file_list.show();
        submit_btn.attr('disabled', false);
    }

so for each file that I add, I create a new ChunkedUploader object, which chunks the file in little 1MB files. The code for the ChunkedUploader object is as follows:

function ChunkedUploader(file, options) {
    if (!this instanceof ChunkedUploader) {
        return new ChunkedUploader(file, options);
    }

    this.file = file;


    this.options = $.extend({
        url: 'index/upload'
    }, options);

    this.file_size = this.file.size;
    this.chunk_size = (1024 * 100); // 100KB
    this.range_start = 0;
    this.range_end = this.chunk_size;

    if ('mozSlice' in this.file) {
        this.slice_method = 'mozSlice';
    }
    else if ('webkitSlice' in this.file) {
        this.slice_method = 'webkitSlice';
    }
    else {
        this.slice_method = 'slice';
    }


    this.upload_request = new XMLHttpRequest();
    this.upload_request.onload = this._onChunkComplete();
}





_upload: function() {
        var self = this,
            chunk;

        // Slight timeout needed here (File read / AJAX readystate conflict?)
        setTimeout(function() {
            // Prevent range overflow
            if (self.range_end > self.file_size) {
                self.range_end = self.file_size;
            }

            chunk = self.file[self.slice_method](self.range_start, self.range_end);

            self.upload_request.open('POST', self.options.url, true);
            self.upload_request.overrideMimeType('application/octet-stream');

            if (self.range_start !== 0) {
                self.upload_request.setRequestHeader('Content-Range', 'bytes ' + self.range_start + '-' + self.range_end + '/' + self.file_size);
            }

            self.upload_request.send(chunk);
        }, 200);
    },

It all works okay, but on the PHP end I receive nothing through : $_GET , $_POST or $_FILE . I can see in Firebug that raw data is being sent through post , there are some gibberish data being sent, I presume it's the small chunk that I just cropped from the original file. I have looked everywhere and I can't find anything releated to this case.

Can you point out what I am doing wrong, because I have to no clue.

Answer 1

You may want to file_get_contents('php://input') instead: this is the raw request body, whereas $_POST is already a parsed representation.

See http://php.net/manual/en/wrappers.php.php#wrappers.php.input