質問編集履歴
10
問題点を修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
Rails5で開発をしています。
|
|
6
6
|
|
|
7
|
-
jQuery file uploadを使用して、クライアント側からS3へ直接画像をアップロードする機能を実装しています。
|
|
7
|
+
jQuery file uploadを使用して、ユーザーが画像をトリミング後、クライアント側からS3へ直接画像をアップロードする機能を実装しています。
|
|
8
8
|
|
|
9
9
|
PC（MacBook Pro)のchromeからは問題なくアップロードができるのですが、PCとiPhoneのsafari、およびiPhoneのchromeからアップすると、ファイルの中身が空っぽになってしまう問題が発生しています。
|
|
10
10
|
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
+
トリミングをしない通常のアップロードはブラウザに関係なく行えるのですが、トリミング後の画像をキャンバスで取得し、blobファイルに変換してアップしようとすると、ブラウザによってはアップロードがうまくいきません。
|
|
18
|
+
|
|
17
|
-
s3への
|
|
19
|
+
s3へのファイルのアップロード自体は問題なくできている（指定したディレクトリに、指定した名前でファイルが作成されている）のですが、サイズが0Byteになってしまっています。
|
|
18
20
|
|
|
19
21
|
一通り調べたのですが、同じような問題を見つけることができず、原因に見当がつきません。
|
|
20
22
|
|
9
試してみたことを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -296,9 +296,31 @@
|
|
|
296
296
|
|
|
297
297
|
safariのコンソールで`data.submit()`直前の`data`,`data.files[0]`,`data.files`の中身を確認してみたところ、それぞれ正しく中身が確認されました。
|
|
298
298
|
|
|
299
|
-
`submit()`メソッドの問題かもしれません。
|
|
299
|
+
fileuploadライブラリの`submit()`メソッドの問題かもしれません。
|
|
300
|
+
|
|
300
|
-
|
|
301
|
+
```javascript
|
|
302
|
+
|
|
301
|
-
|
|
303
|
+
$('#crop_img').cropper('getCroppedCanvas').toBlob(function (blob){
|
|
304
|
+
|
|
305
|
+
data.files[0] = new File([blob], data.files[0].name);
|
|
306
|
+
|
|
307
|
+
data.originalFiles[0] = data.files[0];
|
|
308
|
+
|
|
309
|
+
console.log(data.files[0]);
|
|
310
|
+
|
|
311
|
+
console.log(data);
|
|
312
|
+
|
|
313
|
+
console.log(data.files);
|
|
314
|
+
|
|
315
|
+
// at this point the data is correct on both browsers
|
|
316
|
+
|
|
317
|
+
data.submit();
|
|
318
|
+
|
|
319
|
+
// but submitted file is empty
|
|
320
|
+
|
|
321
|
+
})
|
|
322
|
+
|
|
323
|
+
```
|
|
302
324
|
|
|
303
325
|
|
|
304
326
|
|
8
コード部分を修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -110,23 +110,7 @@
|
|
|
110
110
|
|
|
111
111
|
reader.readAsDataURL(data.files[0]);
|
|
112
112
|
|
|
113
|
-
// $('#clear').show();
|
|
114
|
-
|
|
115
|
-
};
|
|
113
|
+
};
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
// $('#clear').click(function() {
|
|
120
|
-
|
|
121
|
-
// $('#image').val('');
|
|
122
|
-
|
|
123
|
-
// $('.preview').empty();
|
|
124
|
-
|
|
125
|
-
// $('form').reset();
|
|
126
|
-
|
|
127
|
-
// $(this).hide();
|
|
128
|
-
|
|
129
|
-
// });
|
|
130
114
|
|
|
131
115
|
|
|
132
116
|
|
|
@@ -156,8 +140,6 @@
|
|
|
156
140
|
|
|
157
141
|
|
|
158
142
|
|
|
159
|
-
|
|
160
|
-
|
|
161
143
|
progressall: function (e, data) {
|
|
162
144
|
|
|
163
145
|
var progress = parseInt(data.loaded / data.total * 100, 10);
|
7
試してみたことをわかりやすく修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -312,9 +312,9 @@
|
|
|
312
312
|
|
|
313
313
|
### 試してみたこと 3
|
|
314
314
|
|
|
315
|
-
safariのコンソールでdata.submit()直前の`data`,`data.files[0]`,`data.files`の中身を確認してみたところ、それぞれ正しく中身が確認されました。
|
|
315
|
+
safariのコンソールで`data.submit()`直前の`data`,`data.files[0]`,`data.files`の中身を確認してみたところ、それぞれ正しく中身が確認されました。
|
|
316
|
-
|
|
316
|
+
|
|
317
|
-
submitの問題かもしれません。
|
|
317
|
+
`submit()`メソッドの問題かもしれません。
|
|
318
318
|
|
|
319
319
|
|
|
320
320
|
|
6
試してみたことを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
|
|
251
251
|
|
|
252
252
|
|
|
253
|
-
### 試してみたこと
|
|
253
|
+
### 試してみたこと 1
|
|
254
254
|
|
|
255
255
|
[JavaScript-Canvas-to-Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob)をviewに付け足してみましたが、変わりありませんでした。
|
|
256
256
|
|
|
@@ -258,6 +258,8 @@
|
|
|
258
258
|
|
|
259
259
|
|
|
260
260
|
|
|
261
|
+
### 試してみたこと 2
|
|
262
|
+
|
|
261
263
|
toBlob() メソッドを使う代わりに、以下のコードで試してみましたが、変わりありませんでした…
|
|
262
264
|
|
|
263
265
|
```javascript
|
|
@@ -308,6 +310,14 @@
|
|
|
308
310
|
|
|
309
311
|
|
|
310
312
|
|
|
313
|
+
### 試してみたこと 3
|
|
314
|
+
|
|
315
|
+
safariのコンソールでdata.submit()直前の`data`,`data.files[0]`,`data.files`の中身を確認してみたところ、それぞれ正しく中身が確認されました。
|
|
316
|
+
|
|
317
|
+
submitの問題かもしれません。
|
|
318
|
+
|
|
319
|
+
|
|
320
|
+
|
|
311
321
|
|
|
312
322
|
|
|
313
323
|
### 補足情報（FW/ツールのバージョンなど）
|
5
試してみたことを追記しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -258,6 +258,58 @@
|
|
|
258
258
|
|
|
259
259
|
|
|
260
260
|
|
|
261
|
+
toBlob() メソッドを使う代わりに、以下のコードで試してみましたが、変わりありませんでした…
|
|
262
|
+
|
|
263
|
+
```javascript
|
|
264
|
+
|
|
265
|
+
// crop のデータを取得
|
|
266
|
+
|
|
267
|
+
// $('#crop_img').cropper('getCroppedCanvas').toBlob(function (blob){
|
|
268
|
+
|
|
269
|
+
// data.files[0] = new File([blob], data.files[0].name);
|
|
270
|
+
|
|
271
|
+
// data.originalFiles[0] = data.files[0];
|
|
272
|
+
|
|
273
|
+
// data.submit();
|
|
274
|
+
|
|
275
|
+
// })
|
|
276
|
+
|
|
277
|
+
//以上のコードを以下に置換
|
|
278
|
+
|
|
279
|
+
var canvas = $('#crop_img').cropper('getCroppedCanvas');
|
|
280
|
+
|
|
281
|
+
var canvas_data = canvas.toDataURL();
|
|
282
|
+
|
|
283
|
+
var blobData = dataURItoBlob(canvas_data);
|
|
284
|
+
|
|
285
|
+
function dataURItoBlob(dataURI) {
|
|
286
|
+
|
|
287
|
+
var binary = atob(dataURI.split(',')[1]);
|
|
288
|
+
|
|
289
|
+
var array = [];
|
|
290
|
+
|
|
291
|
+
for(var i = 0; i < binary.length; i++) {
|
|
292
|
+
|
|
293
|
+
array.push(binary.charCodeAt(i));
|
|
294
|
+
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
|
|
298
|
+
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
data.files[0] = new File([blobData], data.files[0].name);
|
|
302
|
+
|
|
303
|
+
data.originalFiles[0] = data.files[0];
|
|
304
|
+
|
|
305
|
+
data.submit();
|
|
306
|
+
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
261
313
|
### 補足情報（FW/ツールのバージョンなど）
|
|
262
314
|
|
|
263
315
|
|
4
タイトルの修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
【スマホ対応】Javascriptからs3に画像をアップすると、ファイルの中身が空になってしまう問題を解決したい
|
test
CHANGED
|
File without changes
|
3
タイトルを変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
ある環境
|
|
1
|
+
ある環境下で、Javascriptからs3に画像をアップすると、ファイルの中身が空になってしまう問題を解決したい
|
test
CHANGED
|
File without changes
|
2
試してみたことを追記
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
ある環境からJavascriptからs3に画像をアップすると、サイズが0バイトになってしまう問題を解決したい
|
test
CHANGED
|
@@ -250,6 +250,14 @@
|
|
|
250
250
|
|
|
251
251
|
|
|
252
252
|
|
|
253
|
+
### 試してみたこと
|
|
254
|
+
|
|
255
|
+
[JavaScript-Canvas-to-Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob)をviewに付け足してみましたが、変わりありませんでした。
|
|
256
|
+
|
|
257
|
+
[テストサイト](https://blueimp.github.io/JavaScript-Canvas-to-Blob/test/)にアクセスして、このpolyfill自体がiOSのsafari上で動くことは確認できました
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
|
|
253
261
|
### 補足情報（FW/ツールのバージョンなど）
|
|
254
262
|
|
|
255
263
|
|
1
問題点を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,6 +18,8 @@
|
|
|
18
18
|
|
|
19
19
|
一通り調べたのですが、同じような問題を見つけることができず、原因に見当がつきません。
|
|
20
20
|
|
|
21
|
+
blobファイルの作成がうまくいっていないのでしょうか？
|
|
22
|
+
|
|
21
23
|
アドバイスをよろしくお願いいたします。
|
|
22
24
|
|
|
23
25
|
|