アップロードボタンから選択した画像ファイルのデータがundefined

Question

ファイルのアップロードボタンから選択した画像ファイルをimagesフォルダに保存するという流れの中で、選択した画像がundefinedだからなのかうまく保存することができません。まずは画像ファイルとしてのデータをしっかりとアップロードさせたいです。また、ステータスコード200の場合、レスポンスとして単に「OK」を表示させたいのですが、こちらは下記のような記述でもデータがちゃんとアップロードできていれば「OK」となるのでしょうか。因みに現在は保存ボタンを押すと[object HTMLDivElement]という表示になってしまいます。

今回、wordpressのAjax通信について勉強していて、こちらのサイトを参考に写経しました。
写経しましたが、jqueryの部分はネイティブなjavascriptに置き換えています。その点も自分の知識からいって手探りな状態です。

どうかお力をいただけますように、よろしくお願いいたします。

【 home.php 】

<input id="input_image" type="file" accept="image/*">
<button id="save">保存</button>
<div id="responce"></div>
<input id="load_filename">
<button id="load">読み込み</button>
<img id="load_image">

【 functions.php 】 

define("F_DIR", dirname($_SERVER['DOCUMENT_ROOT']). "/images/");

//imagesフォルダの作成
if(!file_exists(F_DIR)){
	mkdir(F_DIR, 0777);
}

//myscript.jsの登録・呼び出し
//ajaxやトークン認証ができるようにする
function register_myscript(){
	wp_register_script('myscript', get_stylesheet_directory_uri() .'/myscript.js', array(), '5.4.4', true);
	wp_enqueue_script('myscript');
	wp_localize_script('myscript', 'myajax', array(
		'nonce' => wp_create_nonce('my_nonce'),
		'ajaxurl' => admin_url('admin-ajax.php')
	));
}
add_action('wp_enqueue_scripts', 'register_myscript');


//画像を保存するときの設定
function my_action_function_save(){
	check_ajax_referer('my_nonce', 'nonce');
	if(array_key_exists('data', $_FILES)){
		$name = $_FILES['data']['name'];
		$type = $_FILES['data']['type']; 
		$tmp_name = $_FILES['data']['tmp_name'];
		if(strpos($type, 'image/') !== false){
			$file_data = file_get_contents($tmp_name);
			if(file_put_contents(F_DIR . $name, $file_data)){
				echo "OK";
			}else{
				echo "ERROR";
			}
		}
	}
	die;
}
add_action('wp_ajax_my_action_save', 'my_action_function_save');
add_action('wp_ajax_nopriv_my_action_save', 'my_action_function_save');


//画像を読み込んで表示させるときの設定
function my_action_function_load(){
	check_ajax_referer('my_nonce', 'nonce');
	if(array_key_exists('filename', $_POST)){
		$filename = F_DIR . $POST['filename'];
		if(file_exists($filename)){
			$file_data = file_get_contents($filename);
			echo "data:" .$_FILES['filename']. ";base64,". base64_encode($file_data);
		}
	}
	die;
}
add_action('wp_ajax_my_action_load', 'my_action_function_load');
add_action('wp_ajax_nopriv_my_action_load', 'my_action_function_load');

【 myscript.js 】

(() => {
	const $input = document.getElementById('input_image');
	const $save = document.getElementById('save');
	const $load = document.getElementById('load');
	const $loadFile = document.querySelector('#load_filename');
	const $loadImg = document.getElementById('load_image');
	
　　　　//保存ボタンを押すと画像がimagesフォルダに保存される
	$save.addEventListener('click', (e) => {
		let save = event.target;
		let $res = document.querySelector('#responce');
		let files = $input.files[0];


		console.log($input)
		console.log(save);
		console.log(files[0]);

		let fd = new FormData();
		fd.append('data', files[0]);
		fd.append('action', 'my_action_save'); 
		fd.append('nonce', myajax.nonce);　

		
		let myXml = new XMLHttpRequest();
		myXml.onreadystatechange = function(){
			if(myXml.readyState === 4){
				if(myXml.status == 200){
					$res.innerHTML = responce;
				}else{
					$res.innerHTML = 'NO!';
				}
			}
		}
		myXml.open('POST', myajax.ajaxurl, true);
		myXml.send(fd);
	});
	
	

　　　　//画像ファイルが読み込まれ表示される
	$load.addEventListener('click', (e) => {
		let imgFile = event.target;
		let $res = document.querySelector('#responce');
		let fileVal = $loadFile.value;

		let fd = new FormData();
		fd.append('filename', fileVal);
		fd.append('action', 'my_action_load');
		fd.append('nonce', myajax.nonce);

		let myXml = new XMLHttpRequest();
		myXml.onreadystatechange = function(){
			if(myXml.readyState === 4){
				if(myXml.status == 200){
					$loadImg.innerHTML = $loadImg.getAttribute('src', $res);
				}else{
					$res.innerHTML = request.statusText;
				}
			}
		}
		myXml.open('POST', myajax.ajaxurl, true);
		myXml.send(fd);
	});

})();

Answer 1

ボタン押下時にgetElementしてください。
現状だと画面表示時の情報を参照することになります。

Comments

[of_the_Europa]

ご回答ありがとうございます。

$save.addEventListener(
この部分を、
document.getElementById('save').addEventListener(
としましたが、現状変わらず
[object HTMLDivElement]を吐き出してしまいます。

ご回答に対するこちらの解釈あっていますでしょうか？

[m.ts10806]

responce自体をconsole.logしてなにがかえってきてるか確認してください。
ちなみに英語の「レスポンス」ならresponseです（変数名なので名前が処理に影響はしないけど）