formData.append two files from different input file

Question

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 class="col col-sm-12 mb-2">
              <label class="form-label">Cover Image</label>
              <input type="file" class="form-control" name="coverImage" id="coverImage">
          </div>
          
          <div class="col col-sm-12">
              <label class="form-label">File to Embed</label>
              <input type="file" class="form-control" name="fileToEmbed" id="fileToEmbed">
          </div>
      <button type="button" class="btn btn-primary" 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.

Rory McCrossan · Accepted Answer · 2022-05-26 13:40:44Z

1

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);
    }
  });
});

answered May 26, 2022 at 13:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

formData.append two files from different input file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related