Uploading blob with FormData, File content is empty

Question

I'm trying to upload a blob with FormData on chrome. I'm building a web app. A user can create a profile and select an avatar, which is an img tag. When I'm trying to do an ajax request, I build a canvas with the image and call toDataURL on it. Then I transform the data into binary content using this function

    dataURItoBlob: function(dataURI) {
      var binary = atob(dataURI.split(',')[1]);
      var array = [];
      for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], {type: 'application/octet-stream'});
    }

When the blob is created I add it to the formData and send the ajax query (with jquery). The thing is, the content of the file appears to be empty.

 ------WebKitFormBoundarysToAVAYMLPFfJF96
 Content-Disposition: form-data; name="image"; filename="avatar.png"
 Content-Type: application/octet-stream


 ------WebKitFormBoundarysToAVAYMLPFfJF96--

Using FileReader I do a readAsText on the blob and it actually has content :

 �PNG


 IHDR�
 IDATx^���������v�"�`���^[l��N�����׸�k�؁�X�B�[�i�eٜ����yg����E�dF����o~���{�s�sN(�˲�_t�ɤ����݇ns(Z�6ڇ>�O}}��b��l�����ks�̱��r�w�}��{��x<޲}�Q644XNN�;޷�~k7�|��z��V[[�����o�����rss��WTTXII�UWW[^^^��455Yqq���Ը��ߏ>���Xc
 ���s��o��Yg�ew�y�566��...

Has anyone already encountered this issue ? I just don't understand why the query sends an empty file.

Chrome developer tools doesn't actually show the content of files in form data, did you get an empty file in your server side script? — Musa
I'm not the one developing the server script. I'll ask the server developer but I think you're right. Is there any way to have the files logged in developer tools ? Anyway, can post your comment as an answer so I can accept it ? — Elendir

Musa Musa · Accepted Answer · 2013-11-21T12:24:25

Chrome developer tools doesn't actually show the content of files in form data, check the sever side to see if the file is indeed empty. Firebug (a firefox plugin) shows you a portion of file data, you can also use tools like fiddler to see http post bodies.

Uploading blob with FormData, File content is empty

1 Answers