Sending file through AJAX returns 'blob' error

Question

I'm trying to make an AJAX request send a file towards my controller, which then should proceed to read out the sent file and return a sorted array back to the front-end, though it doesn't work as I'm stuck on a 'blob' not set error. I've searched about but didn't really find the answer I was looking for, thus why I'm creating this question.

Currently I'm receiving the following TypeError:

'slice' called on an object that does not implement interface Blob.

The data that I'm trying to send is as following:

http://piclair.com/qk8ms (pic because I can't copy the data directly from my browser.)

The javascript:

// Click handler for file read
$(document).on('click','#load-csv-btn',function(e){
    e.preventDefault();
    var file = $('#file_upload')[0].files;
    console.log(file);

    readCSV(file);
});


function readCSV(file){
    $.ajax({
        type: "POST",
        url: "ajax/read.php",
        data: {file: file},
        contentType: false
    }).success(function(data){
        console.log(data);
    }).fail(function(){
        console.log('error');
    });
}

The PHP handler, though I guess that part is kind of irrelevant for this problem:

<?php
    var_dump($_POST);

I've found someone saying that setting processData: false and contentType: false would let the script ignore the blob requirment, but if I set those parameters my server just sends back an empty array, which I guess is no suprise as I'm not processing any data.

So I'm hoping someone knows a solution to this problem and is able to help me out.

EDIT:

Just to make clear which method I've tried that returns an empty array, here is the alternate code:

$(document).on('click','#load-csv-btn',function(e){
    e.preventDefault();
    var file = $('#file_upload')[0].files[0];
    var fd = new FormData();
    fd.append("csv",file);

    readCSV(fd);
});


function readCSV(file){
    $.ajax({
        type: "POST",
        url: "ajax/read.php",
        data: {file: file},
        contentType: false,
        processData: false
    }).success(function(data){
        console.log(data);
    }).fail(function(){
        console.log('error');
    });
}

Check http://stackoverflow.com/questions/19722920/submitting-a-file-with-jquery-ajax-gives-typeerror — Pratik Joshi, Mar 23 '15 at 15:35
@jQuery.PHP.Magento.com I've tried that method, but it sends back an empty array, as described in my post. `var_dump($_REQUEST)` and `var_dump($_POST)` both do. — Handige Harrie, Mar 23 '15 at 15:44
@entiendoNull Thank you, I'll try to follow that tutorial and see if it works. I'll give an update once I've tried it. — Handige Harrie, Mar 23 '15 at 15:45
Aah the request seems to be sent properly when using the `$.ajaxForm()` function! Thank you for your help @entiendoNull! (If you care for some points you could ofcourse "Answer" the post so that I can accept your answer.) — Handige Harrie, Mar 23 '15 at 16:23
I've added my comment as a post instead, in case it will help others with a similar issue in future. If this solution helped you, feel free to mark it as the correct one :) — faerin, Mar 23 '15 at 17:04
possible duplicate of [jQuery Ajax File Upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — Styphon, Mar 23 '15 at 17:06
For the second piece of code you have to pass the FormData object directly. e.g. `data: file,` — Musa, Mar 24 '15 at 22:39

score 2 · Accepted Answer · answered Mar 23 '15 at 17:03

As far as I am concerned AJAX uploads are not easily done without external libraries. At least, that is what I learned the first time I needed this done.

http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

This guide is pretty good, but a little bit outdated if you are using a newer version of jQuery. You might need to change some deprecated functionality such as (.live() to .on()).

In the end I can warmly recommend it as a good start. I've used it widely for years and with great success.

Good luck!

Sending file through AJAX returns 'blob' error

1 Answers1