File Upload Length Error (...files.length)

Question

I'm trying to create a multi-file upload system, however the length property of the fileInput.files.length is undefined.

Uncaught TypeError: Cannot read property 'length' of undefined

I have tried adding and removing the square brackets from document.getElementById("file1[]")

Assigning fileInput.files to another variable and calling thatVariable.length

Both did not work.

Since this is a multi file upload system, I need it to be in an array.

HTML CODE:

<form action='/' method='post' enctype="multipart/form-data" id='file'>

    <button type="button" onclick="document.getElementById('file1').click(); return false;" class="btn btn-primary" id='choosefile'><span class='glyphicon glyphicon-open-file'></span>&nbsp; Choose File</button><br>

    <b id="filename"></b><br>

    <input type="text" placeholder="New File Name" id="fileplaceholder">
    <input type="file" id="file1" name="file1[]" style="visibility: hidden" onchange="filenameprint()" multiple>
    <button type="button" onclick="uploadCloud()" class='btn btn-success' id='uploadfile'><span class="glyphicon glyphicon-upload"></span>&nbsp;Upload File</button><br>
    <br>
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40"
             aria-valuemin="0" aria-valuemax="1" style="width:0%" id='progress'>
            <span id='uploadpercent'></span>
        </div>
    </div>
    <span id='loaded'></span>
    <script>
        function filenameprint() {
            var file1 = document.getElementById('file1').value;
            if (!empty(file1)) {
                document.getElementById('filename').innerHTML = file1;
            } else {
                document.getElementById('filename').innerHTML = "No File Chosen"

            }

        }
    </script>
</form>

---

Javascript Code:

function uploadCloud() {

    //Sets the Progress Bar to 0
    _('progress').style.width = "0%";

    //Get's the Upload File Button Object Reference
    var fileInput = document.getElementsByName("file1[]");
    var formData = false;
    //Declares the Form Data Object
    if (window.FormData) {
        formData = new FormData();
    }
    var file, reader;
    console.log((fileInput.files).length);
    for (var i = 0; i < fileInput.files.length; i++) {//ERROR COMES FROM HERE!!!
        file = fileInput.files[i];
        if (window.FileReader) {
            reader = new FileReader();

            reader.onloaded = function (e) {


            }
            reader.readAsDataURL(file);

        }
        if (formData) {
            formData.append('file1', file);
        }
    }

    if (formData) {
        $.ajax({
            url: '/uploadCloud.php', //Server script to process data
            type: 'POST',
            // Form data
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false,
            xhr: function () {  // Custom XMLHttpRequest
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { // Check if upload property exists
                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
                }
                console.log(myXhr);
                return myXhr;

            },
            beforeSend: function () {
                _('uploadfile').setAttribute('disabled', 'disabled');
                _('choosefile').setAttribute('disabled', 'disabled');
            },
            //Ajax events
            success: function (data) {
                if (data == 0) {
                    _('loaded').innerHTML = "";
                    _('progress').style.width = "0%";
                    _('filename').innerHTML = "<b>No File</b>"
                } else {
                    _("filename").innerHTML = data;
                }
                _('uploadpercent').innerHTML = "";
                _('loaded').innerHTML = "";
                _('uploadfile').removeAttribute('disabled');
                _('choosefile').removeAttribute('disabled');
                _('progress').style.width = "0%";
            },
        });

        function progressHandlingFunction(e) {
            if (e.lengthComputable) {
                _('progress').style.width = (e.loaded / e.total) * 100 + "%";
                _('uploadpercent').innerHTML = Math.round((e.loaded / e.total) * 100) + "% complete (" + _('filename').innerHTML + ")";
                _('loaded').innerHTML = "Upload " + Math.round((e.loaded / e.total) * 100) + "% complete [" + e.loaded + " bytes loaded of " + e.total + " bytes total]";
            }
        }
    } else {
        _("filename").innerHTML = "<b>No File</b>"
    }
}

Answer 1

Because

var fileInput = document.getElementsByName("file1[]");

is a collection and you act like it is a single element. You need to reference the individual elements.

fileInput[0].files