jsonを使ったファイルの送受信について

Question

前提・実現したいこと

jsでpngの画像をbase64エンコードしてjsonとしてPOSTし、pythonでそのエンコードされた文字列をデコードし、pngとして保存しようと思っております。
以下のようにコードを書いているのですが、保存時にファイルが壊れて開けません。
どうすればきちんと保存できるか教えていただきたいです。

該当のソースコード

//エンコード
btoa(encodeURIComponent(the_file.target.result))

#デコードして保存
with open(path, 'w', encoding='utf-8') as f:
            f.write(
                urllib.parse.unquote(
                    base64.b64decode(
                        validated_data['content'] #jsでエンコードされた文字列
                    ).decode()
                )
            )

追記:全体のコード

// cookie取得
const get_cookie = name => {
	let cookieValue = null;
	if (document.cookie && document.cookie !== '') {
		const cookies = document.cookie.split(';');
		for (var i = 0; i < cookies.length; i++) {
			let cookie = jQuery.trim(cookies[i]);
			if (cookie.substring(0, name.length+1) === (name+'=')) {
				cookieValue = decodeURIComponent(cookie.substring(name.length+1));
				break;
			}
		}
	}
	return cookieValue;
}

class Transmission {
	constructor(method, content, func) {
		this.method = method;
		this.content = content;
		this.func = func;
		this.__proto__.csrftoken = get_cookie('csrftoken');
	}

	send(url) {
		fetch(url, {
			method: this.method,
			credentials: "same-origin",
			headers: {
				"Accept": "application/json",
				"Content-Type": "application/json",
				"X-CSRFToken": this.csrftoken,
			},
			body: JSON.stringify(this.content)
		})
		.then(response => {
			if(response.ok) {
				return response.json();
			} else {
				throw new Error("not found...");
			}
		})
		.then(data => {
			// thisの束縛
			this.func(data);
		})
		.catch(e => {
			console.log(e.message);
		});
	}
}
Transmission.uid = get_cookie('uid');


{
	let file_name = file_content = null;
	// ファイル中身を展開しbase64エンコード
	document.querySelector('.custom-file-input').addEventListener('change',function(e){
		const file = document.getElementById("input_file").files[0];
		const next_sibling = e.target.nextElementSibling;
		file_name = file.name;
		next_sibling.innerText = file_name;
		if (1 <= document.getElementById("input_file").files.length) {
			let reader = new FileReader();
			reader.onload = the_file => {
				file_content = btoa(encodeURIComponent(the_file.target.result));
			}
			reader.readAsText(file, "utf-8");
		}
	});

	// document.getElementById("send").addEventListener("click", e => {
	// 	const cmd = document.getElementById("cmd");
	// 	if(cmd.value != "") {
	// 		let content = {
	// 			sender: Transmission.uid,
	// 			cmd: cmd.value,
	// 			recipient: "00-FF-CE-89-86-5B"
	// 		}
	// 		if(file_name != null && file_content != null) {
	// 			content["name"] = file_name;
	// 			content["content"] = file_content;
	// 		}
			
	// 		tran = new Transmission(
	// 			"POST",
	// 			content,
	// 			(data) => {
	// 				console.log(data);
	// 			}
	// 		);
	// 		tran.send("http://127.0.0.1:8000/api/command/?format=json");
	// 	}
	// });
	document.getElementById("send").addEventListener("click", e => {
		const cmd = document.getElementById("cmd");
		if(cmd.value != "") {
			let content = {
				response: "hogheoh",
			}
			if(file_name != null && file_content != null) {
				content["name"] = file_name;
				content["content"] = file_content;
			}
			
			tran = new Transmission(
				"PATCH",
				content,
				(data) => {
					console.log(data);
				}
			);
			tran.send("http://127.0.0.1:8000/api/command/2/?format=json");
		}
	});
	console.log(document.getElementById("target").value);
}

補足情報（FW/ツールのバージョンなど）

python3
django rest framework

Comments

[yambejp]

＞ pngの画像

は、どうやって持ってきているのですか？

[_ecs]

{
"upfile": {
"name": "can.png",
"content": "JUVGJUJGJUJEUE5HJTBEJTBBJ...."
}
}
このようなjsonをjsでPOSTし、pythonで受け取っています。
validated_data["content"]は上記のjsonのcontentを取得しており、contentはjsでファイルの中身をbase64エンコードした文字列となっています。

[yambejp]

いえそうでなくて
the_file.target.result
はどこからどうやって参照しているのですか？ということです

[_ecs]

失礼しました。コードを追記させていただきました。

[yambejp]

なるほど、input=typeからfilereaderで処理しているのですね？
formdataではだめですか？

[退会済みユーザー]

Data url 形式になっていて、その文字列先頭の data:image/png;base64, を除去しないでデコードしようとしているとかはないですか？

[yambejp]

そもそも単にpostするだけならサブミットするだけでは？
非同期処理とか必要なのでしょうか？

[_ecs]

>>yambejpさん
formdataであればそのまま送って、受け取り保存することができるのですか？
>>SurferOnWwwさん
デコード前の文字列を確認してみたのですが、ついてなさそうでした...

[_ecs]

>>yambejpさん
djangoでREST APIを作っていまして、jsonを受け取りjsonを返す。ということを目標につくっているのと、
返ってきたjsonを遷移せずに画面反映させたいため非同期で処理させたいのです。

Answer 1

// arraybufferをbase64エンコード
const buffer_to_base64 = buffer => {
	let binary = '';
	const bytes = new Uint8Array(buffer);
	const len = bytes.byteLength;
	for (let i = 0; i < len; i++) {
		binary += String.fromCharCode( bytes[i] );
	}
	return window.btoa(binary);
}
let file_name = file_content = null;
	// ファイル中身を展開しbase64エンコード
	document.querySelector('.custom-file-input').addEventListener('change',function(e){
		const file = document.getElementById("input_file").files[0];
		const next_sibling = e.target.nextElementSibling;
		file_name = file.name;
		next_sibling.innerText = file_name;
		if (1 <= document.getElementById("input_file").files.length) {
			let reader = new FileReader();
			reader.onload = the_file => {
				file_content = buffer_to_base64(the_file.target.result);
			}
			reader.readAsArrayBuffer(file);
		}
	});

バイナリファイルなのでreadAsArrayBufferでした...
ポンコツなミスお許しください

Comments

[yambejp]

なんかダブってます？

[_ecs]

ダブりました...
503エラーで投稿できてないと思ったのですができていたようです。申し訳ないです

Answer 2

// arraybufferをbase64エンコード
buffer_to_base64 = buffer => {
	let binary = '';
	const bytes = new Uint8Array(buffer);
	const len = bytes.byteLength;
	for (var i = 0; i < len; i++) {
		binary += String.fromCharCode( bytes[i] );
	}
	return window.btoa(binary);
}

let file_name = file_content = null;
	// ファイル中身を展開しbase64エンコード
	document.querySelector('.custom-file-input').addEventListener('change',function(e){
		const file = document.getElementById("input_file").files[0];
		const next_sibling = e.target.nextElementSibling;
		file_name = file.name;
		next_sibling.innerText = file_name;
		if (1 <= document.getElementById("input_file").files.length) {
			let reader = new FileReader();
			reader.onload = the_file => {
				file_content = buffer_to_base64(the_file.target.result);
			}
			reader.readAsArrayBuffer(file);
		}
	});

バイナリファイルなのでreadAsTextでなくreadAsArrayBufferでした...
お騒がせしてすみませんでした。

Answer 3

ファイルをjsonにするという意図がよくわかりません。
非同期で単純に処理するならこんな感じ

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#hoge').addEventListener('change',(e)=>{
const url='・・・';
const method='post';
const body=new FormData();
body.append(e.target.name,e.target.files[0]);
fetch(url,{method,body}).then(res=>res.text()).then(console.log);
});
});
</script>
<input type="file" name="hoge" id="hoge">

[_ecs]

ありがとうございます。
formdataで試してみます。

[yambejp]

formdataの場合フォームごとまとめて指定してしまうことが多いです
new FormData(form)的な感じ（formはDOMで掴んだform要素）
（個別のinput要素ごとだと例示したような書き方になります）