Bug: Angular-File-Upload produces "DataCloneError" in Chrome

[vlatkoodrljin]

I use angular and https://github.com/danialfarid/angular-file-upload

My code is almost same as: https://github.com/jpillora/xdomain/tree/gh-pages/example/angular

When i try upload file in chrome error is following:

Uncaught DataCloneError: Failed to execute 'postMessage' on 'Window': An object could not be cloned. xdomain.js:882

Chrome version: 40.0.2214.111

Any suggestion?

[jpillora]

Still unsure why this is happening. Currently debugging this with @Ganganation. I'm now thinking it might have been a Chrome change which is causing it...

Edit: Though that would be strange because http://jpillora.com/xdomain/example/formdata/ still works...

[vlatkoodrljin]

Any progress with that?

[jpillora]

Tried debugging yesterday, can't figure out what's causing it. Will need to make a postMessage only test to attempt to see what's causing the DataCloneError error.

[jpillora]

The FormData example http://jpillora.com/xdomain/example/formdata/ is very similar although it works, so it's quite puzzling.

[bioball]

I'm currently working on a project that uses both x-domain and Angular-File-Upload, without issues. Code is in a private repository, so I can't share it, but it more or less looks like this:

$scope.$watch('files', function(files){
  var formData = _.reduce(files, function(form, file, index){
    form.append('file', file, filenames[index]);
    return form;
  }, new FormData());

  return this.$http.post(url, formData, {
    transformRequest: angular.identity,
    headers: {
      "Content-Type": undefined
    }
  });
});

And the view looks like:

<div ngf-drop, ng-model="files"></div>

[jpillora]

Thanks though this does not work in IE89 right? I think that's where the confusion is coming from...

On Thursday, July 2, 2015, Daniel Chao notifications@github.com wrote:

I'm currently working on a project that uses both x-domain and Angular-File-Upload, without issues. Code is in a private repository, so I can't share it, but it more or less looks like this:

$scope.$watch('files', function(files){ var formData = _.reduce(files, function(form, file, index){ form.append('file', file, filenames[index]); return form; }, new FormData());

return this.$http.post(url, formData, { transformRequest: angular.identity, headers: { "Content-Type": undefined } }); });

And the view looks like:

<div ngf-drop, ng-model="files">

[bioball]

Haven't tested in IE8/9, but wasn't this ticket created for Chrome? It definitely works in Chrome.

[jpillora]

Ah sorry, wrong ticket, there are a few of these lol

On Thursday, July 2, 2015, Daniel Chao notifications@github.com wrote:

Haven't tested in IE8/9, but wasn't this ticket created for Chrome? It definitely works in Chrome.

— Reply to this email directly or view it on GitHub https://github.com/jpillora/xdomain/issues/135#issuecomment-117864182.

[uteq]

No problem!

2015-07-02 2:53 GMT+02:00 Jaime Pillora notifications@github.com:

Ah sorry, wrong ticket, there are a few of these lol

On Thursday, July 2, 2015, Daniel Chao notifications@github.com wrote:

Haven't tested in IE8/9, but wasn't this ticket created for Chrome? It definitely works in Chrome.

— Reply to this email directly or view it on GitHub https://github.com/jpillora/xdomain/issues/135#issuecomment-117864182.

— Reply to this email directly or view it on GitHub https://github.com/jpillora/xdomain/issues/135#issuecomment-117864367.

[jansepke]

any progress on this one? I have the same problem with angular-file-upload + xdomain in chrome 45 and IE 11.

[uteq]

I have eventually stopped using angular-file-upload. I created a base64 hash of the file and used that to sends it from A to B. If you'd like I can dig up what I actually did.

[jansepke]

here I found something about it: https://github.com/azer/prova/issues/12

and this fix will solve it for me, patching the emit method:

  emit = function(args) {
    args = JSON.parse(JSON.stringify(args));
    if (jsonEncode) {
      args = JSON.stringify(args);
    }
    frame.postMessage(args, "*");
  };

[jansepke]

the problem is that the postMessage method can't handle functions e.g.

 window.postMessage({test:function(){}},'*')

and angular-file-upload puts a custom function on the xhr object. JSON parse + stringify will remove all functions and returns a plain object

[empty]

@Jandalf I'm having this issue too. Where do I patch the emit function? Would this be in the socket file?

[jansepke]

@empty you need to edit the xdomain file: https://github.com/jpillora/xdomain/blob/gh-pages/dist/xdomain.js#L856

this only the DataCloneError but I could not upload a file anymore, only do plain http POSt without a file (maybe its working for you)

[empty]

@Jandalf thanks I'll give it a try.

[empty]

@Jandalf I get the same thing as you. It actually uploads part of the file, but the file seems to be wrapped in the javascript object. I will keep looking at this and if I find a solution I'll report back, but the fact that this project is horribly maintained will likely have me looking for a better solution overall.

[sahanhasitha]

@jansepke your solution works for me too. Thank you

[buddhipriya]

@jansepke I'm using laravel invertion to catch data from back-end. Your patch works fine. It sends post request successfully. But does not set path correctly. I'm getting back-end error "NotReadableException. Unable to read image from path (/tmp/phpddocUv)"

[drogers98]

I'm also using the patch suggested by @jansepke, which works fine when my ng app is on the same server as the file repo, but, as noted by @empty, when I upload from a cross origin server, files are written as ASCII text, not image data, the text being simply "[object Object]".

`locally uploaded through ng form, everything is fine: $ file test-1-local.jpg test-1-local.jpg: JPEG image data, JFIF standard 1.01

uploaded from another server: $ file test-2-cross.jpg test-2-cross.jpg: ASCII text, with no line terminators`

[brndusic]

@vlatkodrljin workaround is to use angular http service like @bioball described.

@jpillora you can reproduce the problem using Upload service like here https://github.com/danialfarid/ng-file-upload/blob/master/demo/src/main/webapp/js/upload.js#L77

[anandaanv]

@jansepke any reason why your fix worked? I do not see much difference as such, so asking.. Interestingly it has worked for me, too. @jpillora you may want to consider his patch?

args = JSON.parse(JSON.stringify(args));