JavaScript Blob Upload with FormData

Question

I am having a problem uploading a blob created in javascript to my server. The basic idea is that a user uploads an image and in javascript I center crop the image and downsample it before transmission.

The image manipulation is working fine, but the upload itself is not working right. Here is the code that does the upload and conversion from canvas to blob

function uploadCanvasData() {     var canvas = $('#ImageDisplay').get(0);     var dataUrl = canvas.toDataURL("image/jpeg");      var blob = dataURItoBlob(dataUrl);      var formData = new FormData();     formData.append("file", formData);      var request = new XMLHttpRequest();     request.onload = completeRequest;      request.open("POST", "IdentifyFood");     request.send(formData); }  function dataURItoBlob(dataURI) {     var byteString = atob(dataURI.split(',')[1]);      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]      var ab = new ArrayBuffer(byteString.length);     var ia = new Uint8Array(ab);     for (var i = 0; i < byteString.length; i++)     {         ia[i] = byteString.charCodeAt(i);     }      var bb = new Blob([ab], { "type": mimeString });     return bb; } 

The server claims that no files were uploaded, and when I use chrome to examine the request, I see the request payload as:

------WebKitFormBoundaryyzYbm61DKgS09tpB Content-Disposition: form-data; name="file"  [object FormData] ------WebKitFormBoundaryyzYbm61DKgS09tpB-- 

In contrast to the payload of a form being submitted with input type="file"

------WebKitFormBoundaryUOn3WXb7pKLmOxRZ Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg" Content-Type: image/jpeg   ------WebKitFormBoundaryUOn3WXb7pKLmOxRZ-- 

So it looks to me like the XMLHttpRequest is just uploading the result of calling blob.toString()

Does anyone know what I am doing wrong here? Is there a better approach I should be using?

Answer 1

You have a typo in the function uploadCanvasData it should read

formData.append("file", blob); 

Read your code more carefully!