title: $_FILES empty when sending to PHP server
body: <p>I'm trying to record videos on browsers of mobile devices and send that videos to my PHP server. But when I inspect/debug my code in PHP the array $_FILES is empty. I'm sure that something is wrong in my code of JavaScript because of my lack of knowledge.</p>
  <p>Here is my HTML / Javascript code :</p>
  <pre><code>&lt;body&gt;
      &lt;header&gt;
          &lt;h1&gt;HTML5 Video &amp;amp; Audio Input&lt;/h1&gt;
          &lt;h2&gt;Capturing Media with HTML and passing the data to PHP&lt;/h2&gt;
      &lt;/header&gt;
      &lt;form method=&quot;post&quot; action=&quot;serverTest.php&quot; id=&quot;myform&quot; enctype=&quot;multipart/form-data&quot;&gt;
          &lt;label for=&quot;capture&quot;&gt;Capture Media&lt;/label&gt;
          &lt;input name= &quot;uploadedVideo&quot; type=&quot;file&quot; id=&quot;videograbado&quot; accept=&quot;video/*&quot; capture=&quot;user-scalable&quot; multiple /&gt;
          &lt;video id=&quot;player&quot; controls&gt;&lt;/video&gt;
      &lt;/form&gt;
      &lt;script&gt;
          document.addEventListener('DOMContentLoaded', (ev) =&gt; {
              let form = document.getElementById('myform');
              //get the captured media file
              let input = document.getElementById('videograbado');
  
              input.addEventListener('change', (ev) =&gt; {
                  console.dir(input.files[0]);
                  if (input.files[0].type.indexOf(&quot;video/&quot;) &gt; -1) {
                      let video = document.getElementById('video');
                      var video1 = input.files[0];
                      video = window.URL.createObjectURL(input.files[0]);
                      var formData = new FormData();
                      formData.append('video-filename', input.files[0].name);
                      formData.append('video-blob', video);
  
                      xhr('serverTest.php', formData, function (fName) {
                          window.open(location.href + fName);
                      });
  
                      function xhr(url, data, callback) {
                          var request = new XMLHttpRequest();
                          request.onreadystatechange = function () {
                              if (request.readyState == 4 &amp;&amp; request.status == 200) {
                                  callback(location.href + request.responseText);
                              }
                          };
                          request.open('post', url, true);
                          request.send(formData);
                      }
  
                  }
              })
          })
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Any advice or suggestion are welcome.</p>
  <p>Sources:
  <a href="https://www.youtube.com/watch?v=dbrez37HlJM" rel="nofollow noreferrer">https://www.youtube.com/watch?v=dbrez37HlJM</a></p>
  <p><a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-PHP" rel="nofollow noreferrer">https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-PHP</a></p>