how to send Formdata through AJAX or serialized form

Question

I want to know what is wrong in this code that prevent sending the $_POST of multiple input file.

here the view:

      <?php form_open_multipart('Emails/inbox',array('id'=>'fileupload')?>
                    <div class="col-sm-10 r-message-left">

                        <div class="block col-xs-12">
                                <div id="files1" class="col-xs-12 files">
                                    <ul id="sortable" class="fileList">
                                    <span>Uploaded files</span>
                                    </ul>

                                <label class="button" for="images"> Upload</label>
                                <input type="file" id="images" name="files1" multiple="multiple" />

                                </div>
                                </div>

                                <table class="zebra-striped"><tbody class="files"></tbody></table>
                        <div class="col-xs-2">
                            <button type="submit" style="height: 35px;width: 78px;" name="send" id="uploadBtn" value="1" class="btn btn-success m-t-20"><i class="fa fa-envelope-o"></i> send</button>
                        </div>

                    </div>
                    <?php echo form_close(); ?>

and the script which i put it in the footer and the idea is to remove selected files or images from the multiple input file before saving it .. it doesn't actually remove it from the queue as I knew that it is impossible .. i just send the files that i want to save through the script then do the thing, then send it to the controller to save .. but formData doesn't send anything!!

<script>
$.fn.fileUploader = function(filesToUpload, sectionIdentifier) {
  var fileIdCounter = 0;

  this.closest(".files").change(function(evt) {
    var output = [];

    for (var i = 0; i < evt.target.files.length; i++) {
      fileIdCounter++;
      var file = evt.target.files[i];
      var fileId = sectionIdentifier + fileIdCounter;

      filesToUpload.push({
        id: fileId,
        file: file
      });

      var removeLink = "<img src='" + URL.createObjectURL(file) + "' style='width:100%;'/><span class=\"removeFile closebtn\" style='cursor: pointer' data-fileid=\"" + fileId + "\"><h6>x</h6></span>";

      output.push('<li class="ui-state-default" data-order=0 data-id="' + file.lastModified + '">', removeLink, '</li> ');
    };

    $(this).children(".fileList")
      .append(output.join(""));

    //reset the input to null - nice little chrome bug!
    evt.target.value = null;
  });

  $(this).on("click", ".removeFile", function(e) {
    e.preventDefault();

    var fileId = $(this).parent().children("span").data("fileid");

    // loop through the files array and check if the name of that file matches FileName
    // and get the index of the match
    for (var i = 0; i < filesToUpload.length; ++i) {
      if (filesToUpload[i].id === fileId)
        filesToUpload.splice(i, 1);
    }

    $(this).parent().remove();
  });

  this.clear = function() {
    for (var i = 0; i < filesToUpload.length; ++i) {
      if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
        filesToUpload.splice(i, 1);
    }

    $(this).children(".fileList").empty();
  }

  return this;
};

(function() {
  var filesToUpload = [];

  var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");

  $("#uploadBtn").click(function(e) {
    //e.preventDefault();

    var formData = new FormData();
    for (var i = 0, len = filesToUpload.length; i < len; i++) {
      //alert(filesToUpload[i].file);
      formData.append("files", filesToUpload[i].file);
    }

    $.ajax({
      url: '<?php echo base_url() ?>Emails/inbox',
      data: formData,
      processData: false,
      contentType: false,
      type: "POST",
      success: function(data) {
        //alert(data)
        files1Uploader.clear();
      },
      error: function(data) {
        alert("ERROR - " + data.responseText);
      }
    });

  });
})()
</script>

my controller

 public function inbox(){
    $this->load->model('email/Email');

    if($this->input->post('send') == 1){
        var_dump($_FILES,$_POST);die;
        $email_id = $this->Email->insert();
      }
     }

I should see post named files .. but as i said nothing help.

Not sure if this will be of any help but try doing this url: '<?php echo base_url() ?>Emails/inbox' --> url: "<?php echo base_url() ?>Emails/inbox"? — JeanPaul98
– JeanPaul98, Commented Sep 6, 2017 at 22:50
you miss understood, the url ajax is just fine the result of var_dum() is every single post in the form except the multiple input file. — nashwa
– nashwa, Commented Sep 6, 2017 at 22:54

Barmar · Accepted Answer · 2017-09-06 23:56:15Z

2

To send multiple files, they either have to have different names, or the names should end with [] so that PHP will put them into an array. So try:

var formData = new FormData();
for (var i = 0, len = filesToUpload.length; i < len; i++) {
    //alert(filesToUpload[i].file);
    formData.append("files[]", filesToUpload[i].file);
}

File inputs are not put into $_POST, they're only in $_FILES.

answered Sep 6, 2017 at 23:56

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

9 Comments

nashwa Over a year ago

I just tried it but still give me the same answer 'files1' => array (size=5) 'name' => string '' (length=0) 'type' => string '' (length=0) 'tmp_name' => string '' (length=0) 'error' => int 4 'size' => int 0 empty array

Barmar Over a year ago

Put back e.preventDefault(). You're seeing the result of normal form submission, not the AJAX submission.

Barmar Over a year ago

files1 comes from the form, formData calls it files.

Barmar Over a year ago

Or change the button to type="button" so it doesn't submit the form.

Barmar Over a year ago

Check the browser console to see if there are errors. And use the Network tab to see if the AJAX request is being sent, and what response is being received.

|

Collectives™ on Stack Overflow

how to send Formdata through AJAX or serialized form

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related