PHPで$_POSTと$_FILESの両方から同時にデータを受け取りたい

Question

サイト上でファイルをアップロードするシステムを作っているのですが、
フォームに情報を入力し、ファイルを選択して送信ボタンを押したときに、
PHPでデータを受け取りたいのですが、

前提条件として、ファイルと入力情報が送信されていることを確認するために、

if( !empty($_FILES) and isset($_POST) ){
    // ファイルを保存したり、入力情報を登録する処理
}

として、その中で処理を行おうとしたのですが、

ファイルは受け取れているが、POSTされた情報が受け取れませんでした。

どのようにすれば、同時に受け取ることができますでしょうか？

PHPに詳しくなく、この辺りの仕様を理解できていません。
他に情報が必要でしたらご指摘を頂けると幸いです。

宜しくお願い致します。

---

追記:関係していると思われる個所を掲示させていただきます。

<form method="post" action="" id="form" class="files-container" style="background-color: rgb(248,248,248);text-align: center;" enctype="multipart/form-data">
    <div class="form-group"><input class="form-control" type="text" name="title" placeholder="タイトル" style="margin-top: 8px;margin-bottom: 8px;" required=""></div>
    <div class="form-group"><button id="dropzoneSubmit" class="btn btn-primary btn-block d-xl-flex justify-content-xl-center" style="font-size: 16px;margin-top: 64px;">公開する</button>
    </div>
    <input type="submit" value=""  style="display:none" name="publish">
</form>

<script type="text/javascript">
    Dropzone.autoDiscover = false;
    $(document).ready(function() {
        var myDropzone = new Dropzone("#myDropzone", {
            url: "",
            paramName: "file",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFilesize: 3,
            maxFiles: 10,
            acceptedFiles: ".jpg, .jpeg, .png, .gif",
            addRemoveLinks: true,
            dictFileTooBig: "この画像のサイズは{{filesize}}MBです. 最大サイズは{{maxFilesize}}MBです",
            dictInvalidFileType: "対応している拡張子はJPG, JPEG, PNG, GIFのみです",
            dictCancelUpload: "キャンセル",
            dictRemoveFile: "削除",
            dictMaxFilesExceeded: "アップロード可能な枚数は最大{{maxFiles}}枚です",
            dictDefaultMessage: "画像を選択してください",
        });
    });
    Dropzone.options.myDropzone = {
        init: function() {
            var pf = false;
            var myDropzone = this;
            $("#dropzoneSubmit").on("click", function(e) {
                e.preventDefault();
                e.stopPropagation();

                if(pf){
                    $("input[name=publish]").click();
                }
                
                if (myDropzone.files != "") {
                    myDropzone.processQueue();
                } else {
                    $("#myDropzone").submit();
                }
            });
            // ファイル追加時
            this.on("addedfile", function(file) {
                // console.log(file);
            });
            // エラー時
            this.on("error", function(file, response) {
                // console.log(response);
            });
            // アップロード開始時
            this.on("sendingmultiple", function(file) {
                 // console.log(file);
            });
            // アップロード成功時
            this.on("successmultiple", function(file) {
                // submit form
                pf = true;
                $("input[name=publish]").click();
            });
        }
    };
</script>

Comments

[退会済みユーザー]

HTMLを提示してください。

[user0001]

掲示させて頂きました。

Answer 1

普通に受け取れているはずです

<?PHP
print_r($_FILES);
print_r($_POST);
?>
<form method="post" enctype="multipart/form-data">
<input type="text" name="hoge" value="123"><br>
<input type="file" name="fuga" ><br>
<input type="submit" value="send"><br>
</form>

Comments

[user0001]

それであればJavaScriptのコードが原因であるかもしれません。
追記としてHTML, JavaScriptのソースコードを掲示させて頂きましたのでお時間が御座いましたらご教示お願い致します。

[yambejp]

追記されたソースにはそもそもfileを送る仕組みがなさそうですが？

[user0001]

dropzone.jsというライブラリが絡んできますので、もう少し手元で実験してみようと思います。

[maisumakun]

dropzone.jsは、ドロップした瞬間に「ファイルだけ」送信してしまいます。ファイルとフォームを一緒に送る用途には向きません。

Answer 2

dropzone.jsをそのまま用いるだけではファイルが送信されるだけでフォームに入力された情報をPOSTすることができないため、dropzone.jsに実装されているPOSTする項目を追加するメソッドを実行することで解決できました。

this.on("sending", function(file, xhr, formData) {
  // フォームのname="title"(form.title.value)の入力欄の文字列を$_POST["title"]としてPOSTする
  formData.append("title", form.title.value);
});

参考:
・dropzone.jsにおけるPOSTデータの追加について(stackoverflow)
・公式サイトの実装ドキュメント