15

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.

11
  • i can select multiple files using ctrl , how are you planning to do this on mobile ? Commented May 1, 2015 at 17:00
  • 1
    @ProllyGeek I am not sure that is what I am trying to find out. I want to select multiple files from mobile, with this, I have already created the Web-API methods, the jQuery upload to the Web-API, but I cannot select multiple files from my mobile phone gallery to utilize for upload. Commented May 1, 2015 at 17:03
  • @Jacquer Bronkhorst when i tried your code fiddle.jshell.net/prollygeek/n3Lvjo81 , i could only choose files pressing ctrl + multiple files ! is there any other behaviour im not aware of ? Commented May 1, 2015 at 17:10
  • @ProllyGeek yeah, go to that URL with your mobile device. And try and upload multiple files Commented May 1, 2015 at 17:12
  • 1
    no js solution is going to change how multiple files are actually selected; they all rely on the native <input type=file> behavior. given that, i would try to make the process as intuitive as possible, even at the cost of a few extra taps for "power users". Commented May 2, 2015 at 20:51

1 Answer 1

7
+25

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 :

Multiple Upload

Multiple Choice

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.