[iOSのみうまく動かない] javascript input:file から画像リサイズ後にajaxにてS3へ直接アップロード、Deferedを返す

iOSのみ画像アップロード系でうまく動かず、知見をお借りしたいです... 具体的には、下記のような流れを処理しているのですが、iOSの時のみ、AjaxのDeferredで、rejectが返ってきてしまいます。。。なのですが、resolveも同時に返ってきているようでして、修正方法がわからず、お力をお借りしたいです。

処理の流れを記載します。
・getS3PolicyAndUploadImageToS3 引数は、input:fileから取り出したファイルオブジェクトを与える
・Deferedオブジェクトを返すようにしておく - return defer.promise();
・画像を1000px * 1000px以内にリサイズ
・S3用のシグネチャをtabi-muse.comサーバへ取得しに行き
・アップロードはシグネチャを利用し、S3へダイレクトアップロード
・S3のアップロードまで成功すれば、defer.resolve にて、画像のURLフルパスを返す

ここで、iOSの場合resolveと、rejectが両方とも返ってきているような動きになってしまっているのです。

具体的にはrejectであればエラーとして処理しアラートを出す処理にしているのですが、iOSではアラートが出るにもかかわらず、URLフルパスも正しく返ってきておりまして、S3へ保存したURLをその後DBへ保存する処理まで成功しています。

長文で申し訳ありません.... 何かご存知でしたら、ご教授頂けますと幸いです。

iOSのFileObject系の取扱が怪しいのではと思っているのですが、具体的原因が不明で解決方法が思いつかずな状況です。

Javascript側で無茶しすぎでしょうか....

javascript
1UTIL.getS3PolicyAndUploadImageToS3 = function(file){
2    // 20160504 - resize image to max 1000 * 1000 - start
3    var fileRdr = new FileReader();
4    var defer = $.Deferred();
5
6    fileRdr.onload = function() {
7      var image = new Image();
8      image.src = fileRdr.result;
9      image.onload = function (imageEvent) {
10        // Resize the image
11        var canvas = document.createElement('canvas'),
12          max_size = 1000,
13          width = image.width,
14          height = image.height;
15        if (width > height) {
16          if (width > max_size) {
17            height *= max_size / width;
18            width = max_size;
19          }
20        } else {
21          if (height > max_size) {
22            width *= max_size / height;
23            height = max_size;
24          }
25        }
26        canvas.width = width;
27        canvas.height = height;
28        canvas.getContext('2d').drawImage(image, 0, 0, width, height);
29        var dataURL = canvas.toDataURL('image/jpeg');
30        var blob = UTIL.dataURItoBlob(dataURL);
31        //var newFile = new File([blob], file.name);
32
33        //サーバサイドとの通信によるtoken取得と、S3へのアップロードを担う
34        //@param fileObject,
35        var data = {ctype:blob.type, clength:blob.size};
36        // まずはサーバからpolicyとsignatureを取得.
37        $.ajax({
38          url: '/ApiImages/getS3Policy',
39          type: 'GET',
40          dataType: 'json',
41          data: data,
42          cache : false,
43          timeout: 500000
44        }).then(function(data){
45          // サーバが返した情報をそのまま使ってFormDataを作る.
46          var name, fd = new FormData();
47          for (name in data.form) if (data.form.hasOwnProperty(name)) {
48            fd.append(name, data.form[name]);
49          }
50          fd.append('file', blob); // ファイル添付.
51
52          // 送信
53          var xhr = new XMLHttpRequest();
54          xhr.open('POST', data.url, true);
55          xhr.onreadystatechange = function (oEvent) {
56            if (xhr.readyState == 4) {
57              if (xhr.status == 200) {
58                console.log(xhr.responseText);
59                defer.resolve(data.url + data.form.key); //画像のURLフルパスを返す
60              } else {
61                defer.reject("画像アップロードに失敗しました。");
62                console.log("Error", xhr);
63              }
64            }
65          };
66          xhr.upload.addEventListener('progress',function(e){
67            console.log(parseInt(e.loaded/e.total*100));
68            UTIL.progressbarOverlay.progress(parseInt(e.loaded/e.total*100));
69          }, false);
70          xhr.send(fd);
71        }, function(jqXHR, textStatus, errorThrown){
72          defer.reject("画像アップロードに失敗しました。");
73        });
74      }
75    };
76
77    fileRdr.readAsDataURL(file);
78    return defer.promise();
79    // 20160504 - resize image to max 1000 * 1000 - end
80  };

Lhankor_Mhy

2016/05/28 02:28

『resolveと、rejectが両方とも返ってきている』とありますが、UTIL.getS3PolicyAndUploadImageToS3()の.done()と.fail()の両方が動作してるということでしょうか。その際の.state()の値はどうなっていますか？ UTIL.getS3PolicyAndUploadImageToS3()が二重サブミットのような理由で複数回呼ばれることはないでしょうか？