Sending PDF file to server (PHP LARAVEL) using AJAX

Question

I am trying to upload a file (PDF) by AJAX to my server to be handled by a php script in a laravel project. I cannot get the file to send and be received on the server.

In the network I can see that the POST request is getting a 200 response, however it is returning a response of 'file not present' , which is the response from laravel.

Also in the post request the Request Payload contains the following

------WebKitFormBoundaryliAmA3wxs0bB32iZ--

Please see the js and html and php below:

html

<form enctype="multipart/form-data">
   <input type="file" id="cv" name="cv"/>
   <button id="file-send">Add</button>
 </form>

js

$('#file-send').bind('click', function () {
   $.ajax({
      url:"test",
      data: new FormData($("#cv")[0]),
      type:'POST',
      processData: false,
      contentType: false,
      success:function(response){
         console.log(response);
      },
   });
});

LARAVEL CODE

public static function uploadingFile(){
        if (Input::hasFile('cv'))
{
   return "file present";
}
else{
    return "file not present";
}

Answer 1

Try this:

JS:

$('#file-send').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

        $.ajax({
                url         : 'upload.php',     // point to server-side PHP script 
                dataType    : 'text',           // what to expect back from the PHP script, if anything
                cache       : false,
                contentType : false,
                processData : false,
                data        : form_data,                         
                type        : 'post',
                success     : function(output){
                    alert(output);              // display response from the PHP script, if any
                }
         });
         $('#pic').val('');                     /* Clear the file container */
    });

Php:

<?php
    if ( $_FILES['file']['error'] > 0 ){
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']))
        {
            echo "File Uploaded Successfully";
        }
    }

?>

Answer 2

Try This Plugin to upload file

http://malsup.com/jquery/form/#file-upload

 var options = { 
                            beforeSubmit:  showRequest,   
                            success: showResponse,
                            dataType :'json'                 
                        }; 

    $('#file-send').ajaxSubmit(options); 

function showRequest()
{
   //before uploading file
}

function showResponse()
{
   //response after uploading file
}