title: Upload video via Laravel and ajax formdata
body: <p>Please check my below code and help me to upload video file via Ajax formdata and Laravel. I have tried some code for upload file. Firebug console post shows data is posting  but response is null "firebug console html shows". I have attached images of firebug console post and html response.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function saveToDiskOrOpenNewTab(recordRTC) {
      recordingDIV.querySelector('#save-to-disk').parentNode.style.display = 'block';
      recordingDIV.querySelector('#save-to-disk').onclick = function() {
          if(!recordRTC) return alert('No recording found.');
  
          recordRTC.save();
      };
  
      recordingDIV.querySelector('#open-new-tab').onclick = function() {
          if(!recordRTC) return alert('No recording found.');
  
          window.open(recordRTC.toURL());
      };
  
      recordingDIV.querySelector('#upload-to-server').disabled = false;
      recordingDIV.querySelector('#upload-to-server').onclick = function(e) {
          e.preventDefault();
          if(!recordRTC) return alert('No recording found.');
          this.disabled = true;
  
          var button = this;
          uploadToServer(recordRTC, function(progress, fileURL) {
              if(progress === 'ended') {
                  button.disabled = false;
                  button.innerHTML = 'Click to download from server';
                  button.onclick = function() {
                      window.open(fileURL);
                  };
                  return;
              }
              button.innerHTML = progress;
          });
      };
  }
  
  var listOfFilesUploaded = [];
  
  function uploadToServer(recordRTC, callback) {
      var blob = recordRTC instanceof Blob ? recordRTC : recordRTC.blob;
      var fileType = blob.type.split('/')[0] || 'audio';
      var fileName = (Math.random() * 1000).toString().replace('.', '');
  
      if (fileType === 'audio') {
          fileName += '.' + (!!navigator.mozGetUserMedia ? 'ogg' : 'wav');
      } else {
          fileName += '.webm';
      }
  
      // create FormData
      var formData = new FormData();
      formData.append(fileType + '-filename', fileName);
      formData.append(fileType + '-blob', blob);
      callback('Uploading ' + fileType + ' recording to server.');
  
      makeXMLHttpRequest('/recording/video', formData, function(progress) {
          if (progress !== 'upload-ended') {
              callback(progress);
              return;
          }
  
          var initialURL = location.href.replace(location.href.split('/').pop(), '') + 'uploads/';
           //http://www.ct.dev/sarath.ts_993/uploads/
          callback('ended', initialURL + fileName);
  
          // to make sure we can delete as soon as visitor leaves
          listOfFilesUploaded.push(initialURL + fileName);
      });
  }
  
  function makeXMLHttpRequest(url, data, callback) {
      var request = new XMLHttpRequest();
  
      request.onreadystatechange = function() {
          if (request.readyState == 4 &amp;&amp; request.status == 200) {
              callback('upload-ended');
          }
      };
  
      request.upload.onloadstart = function() {
          callback('Upload started...');
      };
  
      request.upload.onprogress = function(event) {
          callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
      };
  
      request.upload.onload = function() {
          callback('progress-about-to-end');
      };
  
      request.upload.onload = function() {
          callback('progress-ended');
      };
  
      request.upload.onerror = function(error) {
          callback('Failed to upload to server');
          console.error('XMLHttpRequest failed', error);
      };
  
      request.upload.onabort = function(error) {
          callback('Upload aborted.');
          console.error('XMLHttpRequest aborted', error);
      };
  
      //request.open('get', url);
      request.open('POST', url);
      var metas = document.getElementsByTagName('meta');
  
      for (i=0; i&lt;metas.length; i++) {
          if (metas[i].getAttribute("name") == "csrf-token") {
              request.setRequestHeader("X-CSRF-Token", metas[i].getAttribute("content"));
          }
      }
      request.send(data);
  }
  </code></pre>
  
  <p><strong>route.php</strong></p>
  
  <pre><code>Route::post('/recording/video', [
      'middleware' =&gt; 'auth',
      'before'  =&gt; 'csrf',
      'as'      =&gt; 'recordingvideo',
      'uses'    =&gt; 'RecordingvideoController@store'
  ]);
  </code></pre>
  
  <p><strong>RecordingvideoController.php</strong></p>
  
  <pre><code>public function store(RecordingvideoRequest $request)
  {
          $type                = $request-&gt;file('video-blob');
          $filename            = $request-&gt;filename;
          dd($filename);
  }
  </code></pre>
  
  <p><strong>Firebug console post</strong>
  <a href="https://i.stack.imgur.com/X2LtD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X2LtD.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Firebug console HTML</strong>
  <a href="https://i.stack.imgur.com/uVuj0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVuj0.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Firebug console Response</strong>
  <a href="https://i.stack.imgur.com/brb55.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/brb55.jpg" alt="enter image description here"></a></p>