Sending files DATA to ajax without form submit

Question

I have written below code to upload images using ajax without form tag. My basic requirement is that after clicking file input, the path of image should be saved in SESSION & once order is confirm the session get destroy and image are saved to folder.

<input id="file-input" name="file-input[]" multiple accept=".png, .PNG, .jpg, .JPG, .jpeg, .JPEG, .PDF, .pdf" type="file" />

$(document).ready(function() {
  $('input[type=file]').change(function() {
    var formData = new FormData();
    var files = this.files;
    for (var i = 0; i < this.files.length; i++) {
      formData.append('file', $('#file-input')[0].files[0]);
    }

    $.ajax({
      type: "POST",
      url: "ajax.php?type=uploadImgSession", // 
      data: formData,
      processData: false,
      contentType: false,
      success: function(msg) {
        alert(msg);
      },
      error: function() {
        alert("failure");
      }
    });
  })
});

My issue is that formData is coming through as blank every time. How can I rectify this?

Your logic seems fine. Do you have multiple elements with the same `#file-input` is in the DOM? — Rory McCrossan, Nov 08 '18 at 09:32
not multiple elements.. yes but once can choose multiple files — Radhika Apte, Nov 08 '18 at 09:34
Multiple files is fine. How have you determined that the FormData is empty? — Rory McCrossan, Nov 08 '18 at 09:35
I have added console.log before ajax to check is there anything in the formData — Radhika Apte, Nov 08 '18 at 09:38
@RadhikaApte — `console.log(a_form_data_object)` won't show you the data appended to it. — Quentin, Nov 08 '18 at 09:39
Duplicate: https://stackoverflow.com/questions/17066875/how-to-inspect-formdata — Quentin, Nov 08 '18 at 09:40
I edited the format of your question, not the content. Note @Quentin's comment - you cannot view FormData in the console as it's been binary encoded. You should verify it's contents on the server after making the request. — Rory McCrossan, Nov 08 '18 at 09:58
Thanks Rory & Quentin, image are no uploading. But not multiple images:( — Radhika Apte, Nov 08 '18 at 10:08
Why you don't append the type in the formdata like this: formData.append('type', 'uploadImgSession'); Because you give your ajax method post and you pass the type like GET. — Cache, Nov 08 '18 at 10:10
I got the bug in the code which was blocking the multiple upload of image, changing this formData.append('file[]', $('#file-input')[0].files[0]); — Radhika Apte, Nov 08 '18 at 10:15

score 1 · Accepted Answer · answered Nov 08 '18 at 10:14

1

As you are trying to upload files using Ajax, you can use jquery - $(form).ajaxSubmit() Ref link

answered Nov 08 '18 at 10:14

Sirisha

141
4

Sending files DATA to ajax without form submit

1 Answers1