I am working with and ajax php upload, the upload works well without ajax jQuery. I went to Google to find more resources on it and adjusted my code several times but still get the same error at the backend that file is empty. This is my code.

At the frontend

<input class="input is-link" id="file" name="file" type="file">
<button id="sendImg" class="button">Send</button>
</form>

My jQuery code

$(function(){
     $("#chatsCard").on('click', '#sendImg', function (e){
     e.preventDefault();
     //alert("test");
    var filedata = $("#file").prop("files")[0];
    var recipient = $("#uname").html();

//alert(filedata);

$.ajax({
      type:'post',
      url:'upload.php',
      contentType:false,
      processData:false,
      cache:false,
      dataType:'json',
data:{
       //rec:recipient,
       filedata
           },
success:function(data){
         alert (data);

}
});//ajax end
});//click end
});//doc end

Backend

<?php
   session_start();
   require("assets/db.php");
   $logged = $_SESSION['logged'];

//This is always my ajax response.
if(empty($_FILES['file'])){
    $response = "No picture selected";
    echo json_encode($response);
exit;
}

    $imgFolder = "media/";
    $fileTpath = $_FILES['file']['tmp_name']; 
    $fileSize = filesize($fileTpath);
    $info = finfo_open(FILEINFO_MIME_TYPE);
    $filetype = finfo_file($info, $fileTpath);
    $filetype = explode ("/",$filetype);
    $filetype = $filetype[1];
$allowedFiles = array("jpg" , "png" , "jpeg");

//rename image.
    $newName = uniqid(8);
    $newName = "recipient". 
    $newName. "."  . $filetype;

//check file size
if($fileSize > 21464568){
    $response = "Picture is greater than 2MB, Resize and try again";
    echo json_encode($response);
exit;
}

//check format.
elseif(!in_array($filetype, $allowedFiles)){
    $response= "You are only allowed to upload jpeg,jpg or png";
    echo json_encode($response);
exit;
}

//check for existence of file.
elseif(file_exists($imgFolder.$newName)){
    $response = "Failed!!! Upload again!!!";
    echo json_encode($response);
exit;
}

//move to folder.
else{
  move_uploaded_file($fileTpath,$imgFolder .$newName);
    $recipient = $_POST['rec'];
    $time = date("d-M-y")." at ". date("h:ia");
    $msg = "media";

//insert to messaging
    $q = "INSERT INTO messaging(message,sender, receiver,time) VALUES(?,?,?,?)";
    $stm = $conn->prepare ($q);
    $stm->bind_param("ssss",$msg,$logged,$recipient,$time);
    $stm->execute();

//insert media details

    $q1 = "INSERT INTO media(sender,mediaName,mediaType) VALUES(?,?,?)";
    $stm = $conn->prepare ($q1);
    $stm->bind_param("sss",$logged,$newName,$fileType);
    $stm->execute();

//json response
    $response = "success";
    echo json_encode($response);
exit;
}

?>

Since I removed the jQuery and the uploading works normally, I assumed the problem is not from the backend so I focused on the jQuery by tweaking it to these

//First change
    var fd = new FormData();
    var file = $("#file").props('files')[0];
    var file data= fd.append("file",filedata);

//This still gives no picture selected.


//Second change
var fd = new FormData($("#mediaPic")[0])

//Passed fd as data but still the same response.

//Tried other stuffs I got on Google to get the image data but still d same response.


Thanks in advance!!!

CodePudding user response：

You just need to post FormData() object, Append method returns null. Datatype text is preferred. So the final jQuery code would be:

$(function(){
    $("#sendImg").on('click', function (e){
        e.preventDefault();
        //alert("test");
        var recipient = $("#uname").html();
        
        var form_data   = new FormData();
        var file = $("#file").prop('files')[0];

        form_data.append('file', file);
            
        $.ajax({
            url: 'upload.php',
            dataType: 'text',
            type: 'post',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            success: function(data) {
                alert(data);
            }
        });//ajax end
    });//click end
});//doc end

To add additional value with form_data, simple use before submitting

form_data.append("rec", "value");

CodePudding user response：

 var file = $("#file").props('files')[0];
                      _______

try console log everything without uploading and i see that props it says: $(...).props is not a function

i guess its prop not props