Uploading blob with FormData, File content is empty

StackOverflow https://stackoverflow.com/questions/20103772

  •  03-08-2022
  •  | 
  •  

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.

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top