formData.append two files from different input file-CodePudding

I'm trying to upload two files from different input file box without refreshing the page using JQuery, AJAX and PHP. The problem is the files are not uploading, probably because of the way I form.append this two files or the way I define the "data" in AJAX.

Here's my HTML form

     <form>
          <div >
              <label >Cover Image</label>
              <input type="file"  name="coverImage" id="coverImage">
          </div>
          
          <div >
              <label >File to Embed</label>
              <input type="file"  name="fileToEmbed" id="fileToEmbed">
          </div>
      <button type="button"  name="steganize" id="steganize">STEGANIZE</button>
          </form>

Here's the code that I tried doing.

$('#steganize').click(function(){
var file = $('#coverImage').prop("files")[0];
            var form = new FormData();
            form.append("coverImage", file);

            var file2 = $('#fileToEmbed').prop("files")[0];
            var form2 = new FormData();
            form2.append("fileToEmbed", file2);

            $.ajax({
                url: "steganize.php",
                type: "POST",
                data:  {form, form2},
                contentType: false,
                processData:false,
                success: function(result){
                    console.log(result);
                }
            });
});

Also tried this

$('#steganize').click(function(){
            var file = $('#coverImage').prop("files")[0];
            var file = $('#fileToEmbed').prop("files")[1];
            var form = new FormData();
            form.append("coverImage", file);

            $.ajax({
                url: "steganize.php",
                type: "POST",
                data:  form,
                contentType: false,
                processData:false,
                success: function(result){
                    console.log(result);
                }
            });

        });

Unfortunately, neither of this two is working. So do you know the proper way of writing it? I'm stuck for hours doing this. Thanks in advance if you could help me.

CodePudding user response：

You can only send a single FormData object in an AJAX request, so your second example is close to correct. The issue there is that you redefine the file variable and only append one of the values.

Also, you grab the second file selected in the fileToEmbed input due to the use of [1] - I assume you instead mean to grab the first.

The correct code should look like this:

$('#steganize').click(function() {
  var coverImage = $('#coverImage').prop("files")[0];
  var fileToEmbed = $('#fileToEmbed').prop("files")[0];
  
  var form = new FormData();
  form.append("coverImage", coverImage);
  form.append("fileToEmbed", fileToEmbed);

  $.ajax({
    url: "steganize.php",
    type: "POST",
    data: form,
    contentType: false,
    processData: false,
    success: function(result) {
      console.log(result);
    }
  });
});