title: Unable to POST video file input using JS FormData object
body: <p>I actually did a lot of research and tried different ways to upload a video file using JQuery's <code>$.ajax()</code> and <code>FormData</code>. I am using an updated version of Chrome and Firefox and aware that uploading of file using <code>$.ajax()</code> is possible for <strong>jQuery 1.6</strong> and up. Right now I'm using <strong>jQuery-3.3.1.js</strong> </p>
  
  <p>For whatever reason, I still can't make it work. I am getting an empty data when I echo <code>$_FILES['myFile']['name'];</code></p>
  
  <p><strong>view.php</strong></p>
  
  <pre><code>&lt;div class="modal_body"&gt;
      &lt;form class="container_UserInfo" id="modalForm_uploadVideo"&gt;
          &lt;label class="modal_label" id="modalLbl_browseVideo"&gt;
          Select Video
          &lt;input type="file" name="myFile" class="modalbtn_browseFiles" id="modalBtn_choose_video_file" value="Select Video" accept="video/*"/&gt;&lt;br&gt;
          &lt;/label&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;button class="btn_modalFooter" id="modalBtn_uploadVideo_upload" name="modalBtnName_uploadVideo_upload"&gt;
      Upload
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>view.js</strong></p>
  
  <pre><code>$('#modalBtn_uploadVideo_upload').on('click',function(event){
      if(hasInputFileLoaded()){
          uploadVideo();
      }else{
          alert("No file input.");   
      }
  });
  
  function uploadVideo() {
      var formData = new FormData();
      formData.append('file', $('#modalBtn_choose_video_file')[0].files[0]);
      console.log($('#modalBtn_choose_video_file')[0].files[0]); // console displays the selected file info.
      $.ajax({
          url: 'controller/upload_video.php',
          type: 'POST',
          data: formData,
          processData: false,  // tells jQuery not to process the data
          contentType: false,  // tells jQuery not to set contentType
          success: function (data) {
              console.log(data);
              alert(data);
          },
          error: function (x, e) {
              if (x.status == 0) {
                  alert('You are offline!!\n Please Check Your Network.');
              } else if (x.status == 404) {
                  alert('Requested URL not found.');
              } else if (x.status == 500) {
                  alert('Internal Server Error.');
              } else if (e == 'parsererror') {
                  alert('Error.\nParsing JSON Request failed.');
              } else if (e == 'timeout') {
                  alert('Request Time out.');
              } else {
                  alert('Unknown Error.\n' + x.responseText);
              }
          }
      });
  }
  </code></pre>
  
  <p><strong>upload_video.php</strong></p>
  
  <pre><code>$myFile = $_FILES['myFile']['name'];
  echo "myFile: " . $myFile;
  </code></pre>
  
  <p><code>echo "myFile: " . $myFile;</code> displays:</p>
  
  <blockquote>
    <p>myFile:</p>
  </blockquote>
  
  <p>This line: </p>
  
  <pre><code>console.log($('#modalBtn_choose_video_file')[0].files[0]); // console displays the selected file info.
  </code></pre>
  
  <p>shows me the information of the file that was selected and I'm sure it's not empty.</p>
  
  <p>I dont know what's missing. It's able to pick up and run the upload_video.php script but gets nothing in <code>$_FILES[]</code></p>
  
  <p>I'd like to reiterate that the <code>&lt;form&gt;</code> is contained within a <strong>modal</strong> <code>div</code>. I don't know if it has anything to do with the problem.</p>
  
  <p>Please help. I'd appreciate any suggestion.</p>
  
  <p>Thank you.</p>
  
  <p>**** EDIT ******</p>
  
  <p>This is what I'm getting in <strong>XHR->Headers->Request Payload</strong> of Google's Developer Tools.</p>
  
  <p><strong>Request Payload</strong></p>
  
  <pre><code>------WebKitFormBoundarybqKoBuiQ9WumYuTo
  Content-Disposition: form-data; name="file"; filename="How to Configure Nginx VirtualHost in Ubuntu.mp4"
  Content-Type: video/mp4
  </code></pre>
  
  <p>And for <strong>Request Headers</strong></p>
  
  <pre><code>Accept: */*
  Accept-Encoding: gzip, deflate, br
  Accept-Language: en-US,en;q=0.9
  Connection: keep-alive
  Content-Length: 20360818
  Content-Type: multipart/form-data; boundary=----WebKitFormBoundarybqKoBuiQ9WumYuTo
  Cookie: PHPSESSID=q669bu6jqodkpqpvu2hructsm7
  Host: localhost
  Origin: http://localhost
  Referer: http://localhost/cai/landingpage.php
  User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
  X-Requested-With: XMLHttpRequest
  </code></pre>
  
  <p>I've added the <code>enctype="multipart/form-data" method="post"</code> as suggested and <code>var_dump($_FILES);</code> and <code>var_dump($_POST)</code> but keep getting</p>
  
  <p><code>NULL</code> or <code>array(0){}</code></p>
  
  <p>I also replaced <code>myFile</code> with <code>file</code> in <code>$_FILES[][]</code></p>
  
  <pre><code>$myFile = $_FILES['file']['name'];
  echo "myFile: " . $myFile;
  </code></pre>
  
  <p>but did nothing to fix my problem.</p>
  
  <p>What other troubleshooting can I do?</p>
  
  <p>******* end of edit *******</p>