title: submit array of file inputs without submitting form itself
body: <p>Basically, I'm in the process of experimenting with a web-based mock email client. for this, I've created a text editor, which when the user wishes to place or attach an image at a certain point in their message, they press a button which creates a new file-input. When uploaded, this then displays the image on their message.</p>
  
  <p>When the user sends the message, the image src tags in the message are switched from the filereader template to a new src, and the file input's values are submitting and the images transfered to a new directory somewhere in the root folder of the website. This works perfectly fine. Images are unique, and a folder exists for each message with images inside them from the message itself.</p>
  
  <p>The issue that I have right now is that when a user wishes to save their message as a draft, I need to do the same process. However, the only difference is that the form isn't submitted, and I simply use ajax to trigger a form upload. The issue I have is that I can't seem to access the file input's upload status. I can't submit the form because when I do I send the message out, which means I have to omit the <code>$(form).submit( function (){});</code> system. </p>
  
  <p>My question hence is: How do I submit an array of file inputs using ajax? This is my code so far:</p>
  
  <p>JS:</p>
  
  <pre><code>$('a[data-command="save-reply"]').click(function(){
      messid = 1;
      var draftbool2 = 4;
  
      imgS = [];
  
      $("#inbox-reply-body").find("img").each(function(){
          if($(this).attr("data-sub-src")){
              var imgO = $(this).attr("data-sub-src");
              var imgN = imgO.replace("postid", messid);
              $(this).attr("src", imgN);
              $(this).removeAttr("data-sub-src");
          }
      });
  
      $(".image-list-reply").find("input[type='file']").each(function(){
          imgS.push($(this));
      });
      alert(imgS);
      var imgArray = JSON.stringify(imgS);
      alert(imgArray);
      var prevMessage = $('#message-body').html();
      var content = $('#inbox-reply-body').html();
      var body = content + "&lt;hr&gt;&lt;div id=\"reply-message\"&gt;" + prevMessage + "&lt;/div&gt;";
  
      //formdata submitting id, draftbool, and body
      var fd2 = new FormData();
      fd2.append('body', body);
      fd2.append('draftbool', draftbool2);
      fd2.append('idmessage', messid);
      fd2.append('image', imgArray);
  
      $.ajax({
          type: 'POST',
          url: "server/saveDraft.php",
          data: fd2,
          contentType: false,
          processData: false,
          success: function(done){
              alert(done);
          }
      });
  });
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>$images = json_decode($_POST['image']);
  
  foreach($images as $l){
      var_dump(implode(",", $images));
      foreach($l as $f =&gt; $name){
      $movedir = ("../resources/img/inbox/".$idofdraft."/");
      $dir = ("resources/img/inbox/".$idofdraft."/");
  
      $allowedExts = array("gif", "jpeg", "jpg", "png", "PNG", "JPG", "JPEG", "GIF");
      $temp = explode(".", $name);
      $extension = end($temp);
      //Set file type and size
      if ((($_FILES['image-reply']['type'] == "image/gif") || ($_FILES['image-reply']['type'] == "image/GIF") 
      || ($_FILES['image-reply']['type'] == "image/jpeg") || ($_FILES['image-reply']['type'] == "image/JPEG") 
      || ($_FILES['image-reply']['type'] == "image/jpg") || ($_FILES['image-reply']['type'] == "image/JPG") 
      || ($_FILES['image-reply']['type'] == "image/png") || ($_FILES['image-reply']['type'] == "image/PNG"))
      &amp;&amp; ($_FILES['image-reply']['size'] &lt; 1073741824)
      &amp;&amp; in_array($extension, $allowedExts)){
          if($_FILES['image-reply']['error'][$f] &gt; 0){
              echo "Return Code: ".$_FILES['image-reply']['error'][$f]."&lt;br /&gt;";
  
          } else {
              if(file_exists($movedir)){
                  echo " Directory Exists";
              } else {
                  mkdir($movedir, 0777, true);
              }
              if(file_exists($movedir.$name)){
                  echo " File already exists";
                  $pathname = $dir.$name;
              } else {
                  $names = $_FILES['image-reply']['tmp_name'];
                  if(move_uploaded_file($names, "$movedir/$name")){
                      $pathname = ($dir."/".$name);
                      echo " File has been uploaded";
  
                      }
                  }
              }
          }           
      }
  }
  </code></pre>
  
  <p>HTML (echo'd in the full PHP file, hence the \")</p>
  
  <pre><code>&lt;form id=\"inbox-reply\" method=\"post\" action=\"server/replyMessage.php\" enctype=\"multipart/form-data\"&gt;
      &lt;a href=\"#\" data-command=\"insertImage\"&gt;&lt;i class=\"fa fa-image\"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;input type=\"file\" id=\"image-upload\" name=\"image\"/&gt;
          &lt;a href=\"#\" data-command=\"insertattach\"&gt;&lt;i class=\"fa fa-paperclip\"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;input type=\"file\" id=\"file-upload\" name=\"file\"/&gt;
          &lt;a href=\"#\" data-command=\"save-reply\"&gt;&lt;i class=\"fa fa-floppy-o\"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id=\"inbox-reply-body\" class=\"reply-content\" contenteditable&gt;
      &lt;/div&gt;
  
      &lt;div class=\"image-list-reply\"&gt;
  
      &lt;/div&gt; 
      &lt;div class=\"attach-list-reply\"&gt;
  
      &lt;/div&gt;
      &lt;input type=\"submit\" name=\"reply\" value=\"Send\"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Normally I would replace <code>foreach($l as $f =&gt; $name)</code> with <code>foreach($_POST['image-reply'] as $f =&gt; $name)</code> and that would work, but here I'm supposed to submit the $_POST['image-reply'] via ajax, which forces me to put all the file inputs in an array. My issue is getting them from the array as usable php elements. Can anyone help me?</p>
  
  <p>PS sorry for my lack of clarity, I'm not sure how to approach the community with a problem, let alone this one! In short, How do i pick up usable file input data from an array of file inputs submitted via ajax?</p>