submit array of file inputs without submitting form itself
<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>