ControllerでCSVを読み込んだ後に確認ダイアログを表示したい

Question

お世話になります。
作りたい処理としては、

1. web画面上でボタンをクリック
2. ファイル選択ダイアログが表示される
3. ファイルを選択したらCSVファイルを読み込む
4. Controllerにてファイル名が合っているか、項目数が合っているか、項目名は合っているかをチェック
5. 内容が正しい場合は「登録しますか？」といったダイアログを表示
6. 「はい」の場合にCSVのデータを登録する

といったことになります。

submitをすることで
1～4までのCSVの内容を確認することはできたのですが、
submitしてしまった後では確認ダイアログを表示することができないのでは？と思い
実装に悩んでいるところです。

アドバイス等をいただければと思います。

現状の、CSVの内容を取得するPGを記載しておきます。

ctp

<?=$this->Form->create(null, ['type' => 'file','url' => ['action' => 'check_csv'],'onsubmit' => 'return false;', 'name' =>'myform' ])?>
  <form enctype="multipart/form-data" method="post">
  <input id="filReadDep" name="filReadDep" type="file" value="" onChange="chgReadDep()"/>
  <button onClick="imgReadDep()"><?= $this->Html->image("buttons.png")?></button>
  </form>
<?= $this->Form->end(); ?>

javascript

function imgReadDep() {
  document.getElementById("filReadDep").value = "";
  document.getElementById("filReadDep").click();
}

function chgReadDep() {
  document.myform.submit();
}

Controller

//ファイルパスチェック
    if (empty($this->request->data['filReadDep']['tmp_name'])) {
      $this->Flash->error(__('select {0}', __('csv')));
      \Cake\Log\Log::info(__('select {0}', __('csv')) . "\n", 'csv_import');
      \Cake\Log\Log::info(__('failed_import'), 'csv_import');
      
      return;
    }
    
    //拡張子チェック
    $fileNm = $this->request->data['filReadDep']['name'];
    $tmpAry = explode('.', $fileNm);
    $extension = $tmpAry[count($tmpAry) - 1];
    
    if ($extension != 'csv') {
      $this->Flash->error(__('different {0}', __('File_Format')));
      \Cake\Log\Log::info(__('different {0}', __('File_Format')) . "\n", 'csv_import');
      \Cake\Log\Log::info(__('failed_import'), 'csv_import');
      
      return;
    }
    
    //CSVファイルを配列に保存
    $tmp = fopen($this->request->data['filReadDep']['tmp_name'], "r");
    while ($csv[] = fgetcsv($tmp, "1024")) {
    }
    //配列 $csv の文字コードをSJIS-winからUTF-8に変換
    mb_convert_variables("UTF-8", "SJIS-win", $csv);

Answer 1

二つの手が考えられるかなと思います。

A. サーバーに一時ファイルとして保存する。
「はい」が選ばれたら一時ファイルを本番に保存します。

B. 一度AjaxでFormData()を使って送信してしまう。
再送信することになるので、ファイルサイズが大きいと不利かも。

Comments

[taiyo-2017]

回答ありがとうございます。
ファイルサイズが大きくない想定のため、
「B. 一度AjaxでFormData()を使って送信」を行いたいと考えています。
ですが、実装の方法が分からず…といった状態です。
どのような実装方法がありますでしょうか？

[x_x]

この辺参考になりますか？
https://qiita.com/BRS_matsuoka/items/ba79a2f500a10ddc0923
なお、この方法をとると再送信時にファイルの内容が変わっている可能性もあるため、もう一度チェックする処理を通す必要があります。

[taiyo-2017]

参考のURLありがとうございます！
ajaxは動作しているようなのですが、formの内容をうまくpostできていないのか、
postした内容をController側で「$this->request->getData();」を表示したところ
「Array」と表示されるようになってしまいました。
解決方法などはありますでしょうか？
ctpは変更せず、jsの「document.myform.submit();」を下記のように変更しています。
--------------------------------------------
var fd = new FormData();
if ($("input[name='filReadDep']").val() !== '') {
fd.append("file", $("input[name='filReadDep']").prop("files")[0]);
}
fd.append("dir", $("#hoge").val());
var postData = {
type : "POST",
url : $('#check-csv-url').text(),
data : fd,
processData : false,
contentType : false
};
$.ajax(postData).done(function(data) {
// 処理
});

[x_x]

#hogeってありました？ その行は不要じゃないですかね？

[taiyo-2017]

ご指摘ありがとうございます。
ctpファイルの変更はないと記載しましたが、紹介していただいたサイトを参考に
<input id="hoge" type="hidden" value="hoge">
を追加しているため、文法エラーにはなっていません。失礼しました。
実際に作成するPGもCSVとパラメータを渡したいと考えているため
このまま残せるなら残しておきたい、と考えています。
少し見にくいですが、以下がctpのform前後の内容となります。
formを使用しているのはこの部分だけになります。
--------------------------------------------
<?=$this->Form->create(null, ['type' => 'file','url' => ['action' => 'check_csv'],'onsubmit' => 'return false;', 'name' =>'myform', 'id' =>'myform' ])?>
<form enctype="multipart/form-data" method="post">
<input id="filReadDep" name="filReadDep" type="file" value="" onChange="chgReadDep()" class="DisplayNone"/>
<button class="" onClick="imgReadDep()"><?= $this->Html->image("buttons.png")?></button>
</form>
<?= $this->Form->end(); ?>
<input id="hoge" type="hidden" value="hoge">

[x_x]

そういえば$this->Form->createが<form>タグを生成しますよね？ 二重に出力されていないか動かしたときのHTMLを確認してみてください。

[taiyo-2017]

formタグは1つのみ出力されているようでしたが、ヘルパーで作成しているformに統一するようにしました。
その他も検証を行っていたところ、CSVファイルの内容とパラメータを取得することができました！
ありがとうございます！
ですが処理を行った後、ajaxの.done()での処理にControllerで作成した値を使用したいのですが、値の渡し方が分かりません…。
現在はcontroller側でecho json_encode($result);をしており、jsでは.done(result){/*処理*/}といった記述をしているのですが、思ったように値が取得できない状態です。
controllerからajaxに配列を渡したいのですがどのような記述ができますでしょうか？

[x_x]

json形式で受け取るときはdataTypeに'json'を指定します。
http://api.jquery.com/jQuery.ajax/
https://itsakura.com/jquery-ajax

[taiyo-2017]

json形式で取得できました！
ajaxで処理を行い、処理の結果によって分岐させて、確認ダイアログを表示することができました！
最後に行いたい処理の登録についてはまだ着手できていませんが、
タイトルの内容については達成できたため、ここで質問を切らせていただこうと思います。
アドバイスありがとうございました！

Answer 2

自己解決ではありませんが、参考のために参考PGを記載させていただきます。

ctp

<?=$this->Form->create(null, ['type' => 'file','url' => ['action' => 'check_csv'],'onsubmit' => 'return false;', 'name' =>'myform', 'id' =>'myform', 'enctype' => 'multipart/form-data' ])?>
  <input id="filReadDep" name="filReadDep" type="file" value="" onChange="chgReadDep()" class="DisplayNone"/>
  <button class="btnMa mt5px" onClick="imgReadDep()"><?= $this->Html->image("buttons_ma1.png", $ma1_options)?></button>
<?= $this->Form->end(); ?>
<input id="hoge" type="hidden" value="hoge">

js

/* ボタンをクリックした際にファイル選択ダイアログを表示 */
function imgReadDep() {
  document.getElementById("filReadDep").value = "";
  document.getElementById("filReadDep").click();
}

/* ファイルを選択した際にファイルを読み込み */
function chgReadDep() {
  var fd = new FormData();
  if ($("input[name='filReadDep']").val() !== '') {
    fd.append("file", $("input[name='filReadDep']").prop("files")[0]);  // 選択したファイル
  }
  fd.append("dir", $("#hoge").val());  // パラメータを追加
  // for(item of fd) console.log(item);  // データ内容を確認できる
  var postData = {
    type : "POST",
    url : $('#test').text(),  // action(今回は「check_csv」)が格納されている
    data : fd,
    dataType : 'json',
    processData : false,
    contentType : false
  };
  $.ajax(postData).done(function(data) {
    if (data.check) {
      if (data.result) {
        // 処理
      }
      if (!window.confirm("ファイルの内容を登録します。よろしいですか？")) {
        alert("登録がキャンセルされました。");
        return;
      }
      alert("登録しました。");
    } else {
      alert(data.message); // エラーメッセージ
      return;
    }
  }).fail(function(data) {
    alert("読み込み処理に失敗しました。");
  }).always(function(data) {
  });
}

Controller

public function checkCsv(...$path)
  {
    $select_table = $_POST["dir"];
    
    $result = [
      "check" => false,
      "result" => false,
      "message" => ""
    ];
    // ファイルパスチェック
    if (empty($_FILES["file"]["tmp_name"])) {
      $result["message"] = "ファイルが読み込めませんでした。";
      $this->autoRender = false;
      echo json_encode($result);
    }
    
    // 拡張子チェック
    $fileNm = $_FILES["file"]["name"];
    $tmpAry = explode('.', $fileNm);
    $extension = $tmpAry[count($tmpAry) - 1];
    
    if ($extension != 'csv') {
      $result["message"] = "拡張子がCSVではありません。";
      $this->autoRender = false;
      echo json_encode($result);
    }
    
    // CSVファイルを配列に保存
    $tmp = fopen($_FILES["file"]["tmp_name"], "r");
    while ($csv[] = fgetcsv($tmp, "1024")) {}
    // 配列 $csv の文字コードをSJIS-winからUTF-8に変換
    mb_convert_variables("UTF-8", "SJIS-win", $csv);
    
    // csv内容チェック
    // csvの1列目1項目目を判断
    if($csv[0][0] == "aaa"){
      // 処理
    }
    // csvの1列目2項目目を判断
    if($csv[0][1] == "bbb"){
      // 処理
    }    
    // その他の処理
    
    $this->autoRender = false;
    echo  json_encode($result);
  }