CakePHP2 DropZone.jsでのファイルアップロードの実装について

###前提・実現したいこと
CakePHP2とDropZone.jpでドラッグ＆ドロップによるファイルアップロードを実現したいです。
CakePHPのバージョンは2.8.3です。

###発生している問題・エラーメッセージ
https://teratail.com/questions/31031
こちらを参考に作成し、レスポンスも200が返ってきていますが、
ファイルがアップロードされません。
アップロードディレクトリのパーミッションは777に変更しています。

ご教授のほどよろしくお願いいたします。

###該当のソースコード
/app/View/UpFiles/index.ctp

PHP
1<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2<?php
3	echo $this->Html->css('dropzone');
4	echo $this->Html->script('dropzone');
5?>
6<script>
7$(function(){
8
9    Dropzone.autoDiscover = false;
10
11    Dropzone.options.myAwesomeDropzone = {
12        paramName : "file",         // input fileの名前
13        parallelUploads:1,            // 1度に何ファイルずつアップロードするか
14		addRemoveLinks: true,
15        acceptedFiles:'image/*',   // 画像だけアップロードしたい場合
16        maxFiles:10,                      // 1度にアップロード出来るファイルの数
17        maxFilesize:0.5,                // 1つのファイルの最大サイズ(1=1M)
18        dictFileTooBig: "ファイルが大きすぎます。 ({{filesize}}MiB). 最大サイズ: {{maxFilesize}}MiB.",
19        dictInvalidFileType: "画像ファイル以外です。",
20        dictMaxFilesExceeded: "一度にアップロード出来るのは10ファイルまでです。",
21    };
22    // urlは実際に画像をアップロードさせるURLパスを入れる
23    var myDropzone = new Dropzone("div#my-awesome-dropzone",{url:"<?php echo $this->Html->url(array('controller' =>'UpFiles','action' => 'upload')); ?>"});
24
25});
26</script>
27
28<div id="my-awesome-dropzone" class="dropzone"></div>
29

/app/Controller/UpFilesController.php

PHP
1<?php
2
3App::uses('AppController', 'Controller');
4
5class UpFilesController extends AppController {
6
7	public $uses = array('UpFile');
8
9	public function index()
10	{
11	}
12
13	public function upload()
14	{
15		$file = $this->request['file'];
16		$ds = DIRECTORY_SEPARATOR;
17
18		$storeFolder = 'uploads';
19
20		if(!empty($file))
21		{
22			$tempFile = $file['tmp_name'];
23			$targetPath = WWW_ROOT . 'uploads' . $ds;
24			$targetFile =  $targetPath.$file['name'];
25			move_uploaded_file($tempFile, $targetFile);
26		}
27	}
28}

行動規範の内容に同意します

回答1件

php
1 $file = $this->request['file'];

となってますが、CakePHP2ではpostデータは$this->request->dataの中に入ってくるので、やるなら

php
1 $file = $this->request->data['file'];

といった感じでは？

upload()アクションに
$this->log($this->request->data); というのを追加して、ログファイルでどんな形式でデータが返ってくるか確認したほうが良いですよ？

投稿2016/06/21 03:36

CodeLab

総合スコア1939

bloom

2016/06/21 05:47

ご回答ありがとうございます！ご指摘いただいた点を修正し、ログ出力処理を記述したところ、出力されませんでした。そこで、index()でもログを吐くようにすると、画面を開いた時と画像をドラッグ＆ドロップした時の2回出力されました。 /app/Config/routes.phpを確認すると以下のような記述をしており、コメントアウトすることで、upload()アクションは呼び出せました。 ```PHP Router::connect('/UpFiles/*', array('controller' => 'UpFiles', 'action' => 'index')); ``` しかし、$this->request->dataの中身は空でした。 ``` 2016-06-21 13:52:36 Debug: Array ( ) ``` dropzone.jsでファイルをアップロードしてるであろう処理に console.log(file);を入れて出力してみました。 ```JavaScript Dropzone.prototype.uploadFiles = function(files) { var file, formData, handleError, headerName, headerValue, headers, i, input, inputName, inputType, key, method, option, progressObj, response, updateProgress, url, value, xhr, _i, _j, _k, _l, _len, _len1, _len2, _len3, _m, _ref, _ref1, _ref2, _ref3, _ref4, _ref5; xhr = new XMLHttpRequest(); for (_i = 0, _len = files.length; _i < _len; _i++) { file = files[_i]; file.xhr = xhr; } method = resolveOption(this.options.method, files); url = resolveOption(this.options.url, files); xhr.open(method, url, true); xhr.withCredentials = !!this.options.withCredentials; response = null; handleError = (function(_this) { return function() { var _j, _len1, _results; _results = []; for (_j = 0, _len1 = files.length; _j < _len1; _j++) { file = files[_j]; _results.push(_this._errorProcessing(files, response || _this.options.dictResponseError.replace("{{statusCode}}", xhr.status), xhr)); } return _results; }; })(this); updateProgress = (function(_this) { return function(e) { var allFilesFinished, progress, _j, _k, _l, _len1, _len2, _len3, _results; if (e != null) { progress = 100 * e.loaded / e.total; for (_j = 0, _len1 = files.length; _j < _len1; _j++) { file = files[_j]; file.upload = { progress: progress, total: e.total, bytesSent: e.loaded }; } } else { allFilesFinished = true; progress = 100; for (_k = 0, _len2 = files.length; _k < _len2; _k++) { file = files[_k]; if (!(file.upload.progress === 100 && file.upload.bytesSent === file.upload.total)) { allFilesFinished = false; } file.upload.progress = progress; file.upload.bytesSent = file.upload.total; } if (allFilesFinished) { return; } } _results = []; for (_l = 0, _len3 = files.length; _l < _len3; _l++) { file = files[_l]; console.log(file); _results.push(_this.emit("uploadprogress", file, progress, file.upload.bytesSent)); } return _results; }; })(this); ``` ログのスクリーンショットが以下になります。 http://www.fastpic.jp/viewer.php?file=0646917844.png responseのところに「Undefined index: file [<b>APP/Controller/UpFilesController.php</b>, line <b>17</b>]」の記述があるのが気になりました。 CakePHPを使わずにDropZoneでのアップロードも試したのですが、こちらではうまくアップロードでき、responseの中は空でした。お手数をおかけいたしますが、ご教授のほどよろしくお願いいたします。

bloom

2016/06/21 05:50

コメントでは```が効かないんですね。。見づらくなってしまい、申し訳ございません。よろしくお願いいたします。

CodeLab

2016/06/22 04:21 編集

indexアクションでブラウザに返されるHTMLをみて、意図通りかどうか確認してみてください。 routes.phpの設定は明らかに変ですね。何か見えないとこで余計なことをしているような気がします。問題を切り分ける必要がありそうなので、一度、cakeではなく、素のPHP(フレームワーク無しで）でどういうレスポンスが返ってくるかなどの、動きを確認されるてみたほうがいいかもしれません。

bloom

2016/06/22 08:39

ありがとうございます！ indexアクションで表示されるHTMLは意図通りでした。素のPHPとCakeでのレスポンスの違いは、XMLHttpRequestの「response」と「responseTxt」の中身で Cakeでは、$this->request->data['file']のインデックスである「file」が定義されていない旨のHTML文が入っています。なぜうまくデータが渡っていないのか、素のPHPとCakeそれぞれの場合で、 dropzone.jsの中をもう少し追いかけてみたいと思います。念のためresponseのHTMLの概要を記述します。 ------------------------------------------------------------------------------------------ ◆見出し Notice (8): Undefined index: file [APP/Controller/UpFilesController.php, line 17] ◆<span class="code-highlight"> uploadアクションに書かれている以下の２行が出力されています。 $this->log($this->request->data, LOG_DEBUG); $file = $this->request->data['file']; ◆<pre class="stack-trace"> UpFilesController::upload() - APP/Controller/UpFilesController.php, line 17 ReflectionMethod::invokeArgs() - [internal], line ?? Controller::invokeAction() - CORE/Cake/Controller/Controller.php, line 491 Dispatcher::_invoke() - CORE/Cake/Routing/Dispatcher.php, line 193 Dispatcher::dispatch() - CORE/Cake/Routing/Dispatcher.php, line 167 [main] - APP/webroot/index.php, line 111 ------------------------------------------------------------------------------------------

bloom

2016/06/23 02:37

http://plugmin.co/436/ こちらを参考に、POSTデータにhogeのカラムを追加してログを確認したところ、hogeの値は出力されました。 dropzone.jsの処理を自分なりに追いかけてみましたが、どのタイミングでfileの中身をconsole.logで出力しても responseには既にfileが定義されていないエラーが入っておりました。ちなみに、index.ctpのhogeを設定している箇所にconsole.logを入れても同様でした。 myDropzone.on("sending", function(file,xhr,formData) { console.log(file); formData.append("hoge", hogeParam); }); ------------------------------------------------------------------------------------------ <script> $(function(){ // 何かの値をPostしたいなら var hogeParam = "hoge"; // おまじない Dropzone.autoDiscover = false; Dropzone.options.myAwesomeDropzone = { paramName : "file", // input fileの名前 parallelUploads:1, // 1度に何ファイルずつアップロードするか addRemoveLinks: true, acceptedFiles:'image/*', // 画像だけアップロードしたい場合 maxFiles:10, // 1度にアップロード出来るファイルの数 maxFilesize:0.5, // 1つのファイルの最大サイズ(1=1M) dictFileTooBig: "ファイルが大きすぎます。 ({{filesize}}MiB). 最大サイズ: {{maxFilesize}}MiB.", dictInvalidFileType: "画像ファイル以外です。", dictMaxFilesExceeded: "一度にアップロード出来るのは10ファイルまでです。", }; // urlは実際に画像をアップロードさせるURLパスを入れる var myDropzone = new Dropzone("div#my-awesome-dropzone",{url:"<?php echo $this->Html->url(array('controller' =>'UpFiles','action' => 'upload')); ?>"}); // 何か値をpostしたい場合 myDropzone.on("sending", function(file,xhr,formData) { formData.append("hoge", hogeParam); }); }); </script> ------------------------------------------------------------------------------------------

行動規範の内容に同意します