title: Send FormData and Upload File Together Through JQuery AJAX Using Codeigniter?
body: <p>I am uploading file through Ajax using codiegniter but i also want to send from data and get it on controller and perform on it.</p>
  
  <p>file uploading is working but can't get other form data.</p>
  
  <p>I also serialize form data but didn't work.</p>
  
  <p>Html Code :</p>
  
  <pre><code>&lt;form action="&lt;?php echo site_url("admin_panel/upload_project_image") ?&gt;" id="form-upload"&gt;
  
  &lt;input type="hidden" name="project_id" id="project_id" value="&lt;?=$project_details-&gt;ID;?&gt;"&gt;
                &lt;div class="fileinput fileinput-new input-group" data-provides="fileinput"&gt;
                  &lt;div class="form-control" data-trigger="fileinput" style="margin:3px"&gt; &lt;i class="glyphicon glyphicon-file fileinput-exists"&gt;&lt;/i&gt;
                    &lt;span class="fileinput-filename"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;span class="input-group-addon btn btn-default btn-file" style="margin:3px"&gt;
                    &lt;span class="fileinput-new"&gt; &lt;i class="glyphicon glyphicon-paperclip"&gt;&lt;/i&gt;
                      Select file
                    &lt;/span&gt;
                    &lt;span class="fileinput-exists"&gt;
                      &lt;i class="glyphicon glyphicon-repeat"&gt;&lt;/i&gt;
                      Change
                    &lt;/span&gt;
                    &lt;input type="file" name="file[]" multiple id="file"&gt;&lt;/span&gt;
                  &lt;a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput" style="margin:3px"&gt;
                    &lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;
                    Remove
                  &lt;/a&gt;
                  &lt;a href="#" id="upload-btn" class="input-group-addon btn btn-success fileinput-exists" style="margin:3px"&gt;
                    &lt;i class="glyphicon glyphicon-open"&gt;&lt;/i&gt;
                    Upload
                  &lt;/a&gt;
                &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>Jquery Code :</p>
  
  <pre><code>$('#upload-btn').on('click', function(event) {
          var filesToUpload = inputFile[0].files;
          var projectID = $('#project_id').val();
          if (filesToUpload.length &gt; 0) {
              var formData = new FormData();
  
              for (var i = 0; i &lt; filesToUpload.length; i++) {
                  var file = filesToUpload[i];
  
                  formData.append("file[]", file, file.name);             
              }
              var other_data = $('#form-upload').serializeArray();
              $.each(other_data,function(key,input){
                  formData.append(input.name,input.value);
              }); 
              $.ajax({
                  url: uploadURI,
                  type: 'post',
                  data: formData,
                  processData: false,
                  contentType: false,
                  success: function(data) {
                      console.log(data);
                      listFilesOnServer();
                  },
  </code></pre>
  
  <p>Controller Code:</p>
  
  <pre><code>function upload_project_image() {
          if (!empty($_FILES)) {
              $this-&gt;load-&gt;library('upload');
              $config['upload_path'] = "./assets/uploads";
              $config['allowed_types'] = 'gif|jpg|png|mp4|ogv|zip';
              $this-&gt;upload-&gt;initialize($config);
              $this-&gt;load-&gt;library('upload', $config);
              if (!is_dir($config['upload_path'])) {
                  mkdir($config['upload_path'], 0777, true);
              }
  
              $files = $_FILES;
              $project_id = $_POST['projectID'];
              echo $project_id . "--ID";
              $number_of_files = count($_FILES['file']['name']);
              $errors = 0;
  </code></pre>