イメージアップロードの質問(Javascriptのみ)

New Contributor

イメージアップロードの質問(Javascriptのみ)

Javascriptでファイルアップロードに関する質問です。

 

FileReaderでBinaryStringに変換 → Blobでイメージファイルをアップロードするとファイルが壊れて、Box上でも確認できず、ダウンロードしても壊れたイメージファイルがダウンロードされます。

DataURLでもテストしてみましたが、同じ問題が発生したので、この件に関してアドバイスをお願いします。

 

まず、Node.jsは使っていません。

コードではJPGのみですが、GIF、PDFなどのファイルをアップロードしても問題は変わりませんでした。

※テキストファイル(txt、htmlなど)は問題なくアップロードされます。

 

コードは下記の通りです。

 

function Upload_Box(Binary){
	var token = "トークン";

	var blob = new Blob([Binary], {type: 'image/jpg'});
	//var file = new File([blob], 'test.jpg');
	var form = new FormData();
	form.append('Authorization', 'Bearer ' + token);
	//form.append('file', file);
	form.append('file', blob);
	form.append('attributes', '{"name":"test.jpg", "parent":{"id":"0"}}');

	$.ajax({
		url:"https://upload.box.com/api/2.0/files/content",
		type:"POST",
		contentType: false,
		processData: false,
		headers: {
			Authorization: "Bearer " + token,
		},
		data: form,
	}).done( function (data){
		console.log(data);
	});
}

 

 

3件の返信3
Moderator

Re: イメージアップロードの質問(Javascriptのみ)

@ジャンジャン 

こんにちは!ご質問ありがとうございます。

mimeTypeが抜けているように思います。mimeTypeを使用して再度お試しいただけますか?

 

"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
"data": form

New Contributor

Re: イメージアップロードの質問(Javascriptのみ)

@Daichi 

ご返信ありがとうございます!

 

下記のコードでやってみましたが、結果は変わりませんでした…

function Upload_Box(Binary){
	var token = "トークン";

	var blob = new Blob([Binary], {type: 'image/jpg'});
	//var blob = new Blob([btoa(Binary)], {type: 'image/jpg'});
	//var blobUrl = URL.createObjectURL(blob);
	//var file = new File([blob], 'test.jpg');
	var form = new FormData();
	form.append('Authorization', 'Bearer ' + token);
	//form.append('file', file);
	form.append('file', blob);
	form.append('attributes', '{"name":"test.jpg", "parent":{"id":"0"}}');

	$.ajax({
		url:"https://upload.box.com/api/2.0/files/content",
		type:"POST",
		contentType: false,
		processData: false,
		//dataType: "json",
		headers: {
			Authorization: "Bearer " + token,
		},
		data: form,
		mimeType: "multipart/form-data",
	}).done( function (data){
		console.log(data);
	});
}

 

Moderator

Re: イメージアップロードの質問(Javascriptのみ)

@ジャンジャン 返信おそくなり申し訳ございません

 

当初のポストをきちんと読んでいませんでしたすいません。

私も頂いたコードを試してみましたがbinaryだと同じ結果になりました。

ファイルを一度base64形式にしてからアップロードしたらうまくいきました。(仕様については社内エンジニアに引き続き確認しております。)

一旦アップロードするファイルをbase64エンコードしてからアップロードをおためしいただけますか?

うまく行かなかったら教えてください。