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 };
あなたの回答
tips
プレビュー