How to pass image and multiple inputs to php with FormData()

Question

I have a form that allows users to enter an item number, item description, creation date, and also upload an image. I want to push item number, item description, create date, uploaded image, AND a non form input (login ID) to my php file for upload to my database. I had it all working until I tried to add my image. I can't get my image to go through. I was told to use FormData for image but how do I pass the other inputs from the form and the non form input login ID. Here is my original code that was working with exception of the image getting passed in wrong format.

 function AddItem(){
var number = document.forms["additemform"]["item_number"].value;
var description = document.forms["additemform"]["item_description"].value;
var date = document.forms["additemform"]["creation_date"].value;
var useremail= "<?php echo $_SESSION['UserEmail']; ?>";
var image = document.forms["additemform"]["item_image"].value;

      var isValid = false;
  $.ajax({           
      type: "POST",  
      url: "/AddNewItem.php",  
      data: { "Number": number,  "User_Email": useremail, "Description": description,  "Date": date, "Image": image },
      dataType: "json",
      success: function(resp){
        console.log(resp);
        if(resp.reply == "Success")
        {
            isValid = true;
          form.submit();
        }
        else
        {
        isValid = false;
        }
      },
      error: function(data, status){
        console.log(data, status);
        alert("error")
      }

    }); //end Ajax
    console.log(isValid);
     return isValid;
};
</script>

Please notice how UserEmail is not part of the form. I need this sent along with the other data so it can be uploaded at same time.

Now I am trying to update my code to fit format but I am not sure my syntax is right and I don't know how to include the user email.

   function AddItem(){
    var itemdata = new FormData();
    itemdata.append('number', $(document.forms["additemform"]["item_number"].value);
itemdata.append('description', $(document.forms["additemform"]["item_description"].value);
itemdata.append('image', $(document.forms["additemform"]["item_image"].value)[0].files[0]);

1) am I on the right track? Syntax right? 2) how do I add the user email?

Possible duplicate of [Issue with sending image over AJAX](https://stackoverflow.com/questions/24072873/issue-with-sending-image-over-ajax) — CecilMerrell aka bringrainfire, Jan 26 '19 at 22:20

score 0 · Answer 1 · answered Jan 26 '19 at 22:47

0

You should start with this to add the image/images to the FormData:

var formdata = new FormData();

// Check For Multile Files to Upload
if( document.getElementById("upload_field_id") ) {

    var filedata = document.getElementById("upload_field_id").files;
    var len = filedata.length;

    if( len ) {
        for (var i=0; i < len; i++) {
            var file = filedata[i];
        formdata.append('files[]', file);
        }
    }
}

After this, you can also append the other fields:

// Your code: 
var number = document.forms["additemform"]["item_number"].value;
var description = document.forms["additemform"]["item_description"].value;
var date = document.forms["additemform"]["creation_date"].value;
var useremail= "<?php echo $_SESSION['UserEmail']; ?>";
// End of Your code
formdata.append('number', number);
formdata.append('description', description);
formdata.append('date', date);
formdata.append('useremail', useremail);

That's it. You just put formdata as the value of the data property in your ajax call and catch the $_REQUEST in your .php destination file.

answered Jan 26 '19 at 22:47

TheoPlatica

1,060
7
11

BlueFish - THANK YOU. VERY HELPFUL. If I know I will only have one image, do I still need that loop? – BEP Jan 27 '19 at 01:28
Happy to help BEP. You don't need the loop, but it doesn't affect your functionality for uploading a single file. If you want to remove the loop and make it work just for a single file, you can: `var filedata = document.getElementById("upload_field_id").files[0]; formdata.append('file_upload', filedata);` – TheoPlatica Jan 27 '19 at 13:51
BlueFish - so I added the formdata code just as you show in your initial answer (for number, description, data, user email). I added this for my image: var filedata = document.getElementById("_nc_image_in").files[0]; formdata.append('NC_Image', filedata); I get no errors until I change the Ajax data property to data: formdata, Once I change data property to that, my code doesn't go through. My Ajax is errorring out. I am not getting errors in my console but Ajax just exits.is my syntax right for data: formdata, ? do I need to settings any other sets in my Ajax properties? – BEP Jan 27 '19 at 21:26

How to pass image and multiple inputs to php with FormData()

1 Answers1