Split multi-file post with Javascript before upload

Question

I understand the HTML/PHP side of a multi-file upload, but I suppose what I'm after is a Javascript solution that separates the files array pre-post and individually sends the files to a separate PHP program to receive upload and success/fail feedback before continuing. (ie: files[0] -> POST -> Success -> files[1] -> POST -> Success ->etc...)

Here is what I use now for a single file -

    function upload(file){
        var data = new FormData();
        data.append("file", document.getElementById(file).files[0]);
        var xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open("POST", "uploader.php");
        xmlHTTP.send(data);
    }

I realize that the easy way out would be to create multiple file fields, however what I'm trying to do is use <input type="file" multiple> from HTML5 to mass-select a list of files at a time. If I could only separate the files with Javascript, then it would be a simple matter of looping through the above script with an onreadystatechange reporting the success/fail each time.

Any ideas?

EDIT:
Forgive my tunnel vision, that was extremely simple! Here's my full code in case it helps someone else out.

<html>
<head>
    <script language="Javascript">
    function multiupload(file){
    count = 0;
    maxcount = document.getElementById(file).files.length;
    alert(maxcount);
    upload(file,count);
    }

    function upload(file,count){
        var data = new FormData();
        data.append("file", document.getElementById(file).files[count]);
        var xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open("POST", "uploader.php");
        xmlHTTP.onreadystatechange=function(){
            if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200){
            count = count+1;
            if(count<maxcount){
            upload(file,count);
            }
            }
        }
        xmlHTTP.send(data);
    }
    </script>
</head>
<body>
    <div id="result"></div>
    <form method="post" action="">
        <input type="file" name="file" id="file" multiple>
        <input type="button" name="submit" value="Upload" onclick="multiupload('file');void(0);">
    </form>
</body>
</html>

You can get rid of the `maxcount` logic by just increasing your `count` until `files[count]` returns null. — siannopollo, Oct 11 '13 at 20:40

score 3 · Accepted Answer · edited May 23 '17 at 11:59

3

Try this. You can start uploading the next file in the success handler. That way you can do files[0] -> POST -> Success -> files1 -> POST -> Success

edited May 23 '17 at 11:59

Community

1
1

answered Feb 07 '13 at 17:41

Birla

1,170
11
30

score 3 · Answer 2 · answered Feb 07 '13 at 18:12

To see how many files there are, use document.getElementById(file).files.length. Once you've looped that many times, you have uploaded all the files! Here's my sample:

<html>
<head>
<script language="Javascript">
function multiupload(file){
count = 0;
alert(document.getElementById(file).files.length);

}

</script>
</head>
<body>
    <form method="post" action="" enctype="multipart/form-data">
    <input type="file" name="file" id="file" multiple>
    <input type="button" name="submit" value="Upload" onclick="multiupload('file');void(0);">
</form>
</body>
</html>

(Source: https://developer.mozilla.org/en-US/docs/DOM/FileList)

Split multi-file post with Javascript before upload

2 Answers2