Input file upload multiple files not working on Mobile device

Question

I have a generic file up loader which looks like this:

<span class="input-group-btn">
    <span class="btn btn-default btn-fill btn-file">
        Browse<input type="file" id="fileInputs" multiple accept="image/*" onclick="resetprogresss()">
    </span>
</span>

I can upload multiple files with my Desktop no problems, but When I try and use the same functionality on a mobile device, I cannot seem to select multiple files.

here is the javascript:

var Filenames;

function generateUUID() {
    var d = new Date().getTime();
    var uuid = 'xxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
};

var MainPath = generateUUID();
var Names = [];

function UploadFiles() {
    var SetDir = MainPath;
    var fileInputs = document.getElementById("fileInputs");
    if ('files' in fileInputs) {
        if (fileInputs.files.length == 0) {
            alert("Please select a file");
            return;
        } else {
            var file = fileInputs.files[0];
            var ar = $("#AutoResumeBoxs").is(":checked");
            var chunksize = 20000;
            var name = SetDir;

            /*
            Arguments:
                username            name used to create subfolders on the server.
                files               files object from the file input tag.
                uploadStartFunction function that receives a file object just before uploading.
                progressFunction    function that accepts a percent-complete integer value.
                doneFunction        function called when file is uploaded.
                errorFunction       function called when an error occurs.
                chunkSize           size in bytes of each chunk uploaded.
                autoResume          bool to control auto resuming.
            */
            CFUpload(name, fileInputs.files, uploadStarts, progresss, dones, errors, chunksize, ar);
        }
    }
}

function uploadStarts(thisfile) {
    Names.push(thisfile.name);


}

function progresss(percent) {

    var p = percent + "%";
    $("#lblUPs").text(p);
    $("#progressbars").width(p);
    $("#progressbars").attr("data-appear-progress-animation", p);
    $("#ProgressTabs").text(p);
}

function resetprogresss() {
    progresss(0);
}

function dones() {


}

function errors(data) {

}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1) {
        c_value = null;
    }
    else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start, c_end));
    }
    return c_value;
}

$(document).ready(function () {
    $("#urls").hide();
    document.getElementById("saveme").disabled = true;

    var username = getCookie("username");
});

I use this library to upload the files. Any Advice would be greatly appreciated.

Answer 1

Well it depends on the selection method you choose on your mobile , however , my native Gallery , and file manager absloutely work fine on my mobile , just tap and hold the file you want to upload , and it will switch to multi selection mode :

Please note that there are many jQuery plugins out there to upload files like this one , so it is not necessary to use pure html input tag.