upload a form's file and text data to PHP using jQuery and AJAX

Question

Good morning. I'm trying to make the form submission of a message more fluid avoiding the reload of the page for the sending of it. Since the message may be text or image, I need to send both of them to a PHP page for upload. I'm using this code in the html page:

<form id="newmessage" enctype="multipart/form-data">

<textarea form="newmessage" id="messagetext" name="messagetext" ></textarea>
         
<input type="submit" name="submit" value="send" onclick="return newMessage();">
         
<input type="file" accept="image/*" id="image" name="image">

</form>
      
<script>
function newMessage(){
var messagetext = document.getElementById("messagetext").value;
var image = document.getElementById("image").value;

      $.ajax({
           type:"post",
           url:"new_message.php",
           data: 
           {  
            "messagetext" :messagetext,
            "image" :image,
           },
           cache:false,
           success: function(html) {
               document.getElementById("messagetext").value = "";
                 }
             });
             
             return false;
          }
      </script>

As you can see, I'm allowing users to type in the textarea or upload a file. When they submit the form, the newMessage() method is invoked and sends image and messagetext to new_message.php, which process them:

   // new_message.php
   $messagetext = $_POST["messagetext"];
   $image = $_FILES["image"]["tmp_name"]; 
   
   if((!empty($messagetext) || isset($image))) {
   
       if(!empty($messagetext)) {
           // create text message
       } else if(isset($image)) {
           // create image message
       }
   }

When I write a text message it works perfectly, but it doesn't send anything if it's image. Maybe the image variable in AJAX is not taking the file properly. I excuse if this question is unclear, but I'm a beginner in StackOverlow and I'm open to edits. Thanks for all replies.

Answer 1

can you try this. you don't need to worry about the file and message in textarea. Make sure you have added jQuery.

$("#newmessage").on("submit", function(ev) {
  ev.preventDefault(); // Prevent browser default submit.

  var formData = new FormData(this);
    
  $.ajax({
    url: "new_message.php",
    type: "POST",
    data: formData,
    success: function (msg) {
      document.getElementById("messagetext").value = "";
    },
    cache: false,
    contentType: false,
    processData: false
  });
  return false;
});