I'm uploading a form containing a file to my server, which runs validation and returns success or failure.

The form is sent using Ajax and FormData.

On my test server all data, including the file is received. However, on my live server it returns saying that this file is missing.

If i interrogate the FormData object in both environments the file is present, it just never seems to make it to the server.

Obviously i've removed a couple of items and replaced with *s and also the post url is generated by the page.

HTML:

<form method="POST" action="https://******" accept-charset="UTF-8" enctype="multipart/form-data">
<div >
  <div >
    <div id="sport_types">
      <label for="match">What match is this video from</label>
      <select id="event_select" name="match" >
        <option value="">Select Match</option>
        <option value="9024802136436009">Rugby Newers</option>
      </select>
    </div>
    <div >
      <label for="video">Choose your video</label><br>
      <div >
       <span id="upload_text">Choose Video</span>
       <input id="imageLoader" accept="video/*" type="file" name="video">
      </div>
       <div id="fileName"></div>
    </div>
    <div >
      <label for="video_name">Enter a short description of the video</label>
      <input name="video_name" type="text" placeholder="Video Description" value="">
    </div>
    <input type="hidden" name="video_id" value="0">
  </div>
</div>

<div id="form_buttons_image">
  <a href="/video/1451290748440885">Cancel</a>
    <input id="submit" type="submit" >
    <span id="uploading_feedback" >Uploading Video...</span>
</div>

<div >
  <div >
    <div >
      <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >
        <span id="progress_label">0%</span>
      </div>
    </div>
  </div>
</div>

</form>
Copy code

Javascript:

    $('form').submit( function( e ) {
    formData = new FormData( this );
    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();

            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                   var percentComplete = evt.loaded / evt.total;
                   percentComplete = parseInt(percentComplete * 100);
                   percentShown = percentComplete*0.98;
                   showProgress(percentShown);
                }
            }, false);

            return xhr;
        },
        url: '{{Request::url()}}/process',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false
    }).done(function(data) {
        if (data[0] == 0) {
            console.log( data[1][0] );
            console.log( data[2] );
            $('#feedback').html(data[1][0]).removeClass("hidden");
            $('#key_video').removeClass("hidden");
            $("#uploading_feedback").addClass("hidden");
            $(".progress").addClass("hidden");
        }
        else if (data[0] == 1) { 
            window.location.assign(data[1]);
        }
    });
    e.preventDefault();
});
Copy code