File not received at server using FormData

Question

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 class="row">
    <div class="col-md-6">
       <div class="form-group" id="sport_types">
           <label for="match">What match is this video from</label>
           <select id="event_select" name="match" class="form-control">
               <option value="">Select Match</option>
               <option value="9024802136436009">Rugby Newers</option>
            </select>
        </div>
        <div class="form-group">
           <label for="video">Choose your video</label><br>
           <div class="fileUpload btn btn-info">
              <span id="upload_text">Choose Video</span>
              <input id="imageLoader" accept="video/*" type="file" name="video">
            </div>
             <div id="fileName"></div>
        </div>
        <div class="form-group">
           <label for="video_name">Enter a short description of the video</label>
           <input name="video_name" type="text" class="form-control" placeholder="Video Description" value="">
        </div>
        <input type="hidden" name="video_id" value="0">
    </div>
</div>

<div id="form_buttons_image">
    <a class="btn btn-default" href="/video/1451290748440885">Cancel</a>
        <input id="submit" type="submit" class="btn btn-info  hidden ">
        <span id="uploading_feedback" class="hidden">Uploading Video...</span>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="progress hidden">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                <span id="progress_label">0%</span>
            </div>
        </div>
    </div>
</div>

</form>

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();
});

Answer 1

If your code is working on test server then just check folder permission and folder location. permission should be 777.

Thanks