Multiple File Upload in dialog box

Question

I have custom button which opens a dialog box of out of the box page Upload.aspx of a document library.

First I am getting the GUID of the library by REST API and then passing the URL to open it into the dialog.

Below is my code to open the dialog box by button click:

var openDialog = function(pageUrl) { 
    var options = {
        url: pageUrl,
        title: 'Upload Document to Upload Library',
        allowMaximize: false,
        showClose: true,
        width: 500,
        height: 300
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);       
}

var GenerateButtonURL = function(listTitle){
    try {
        var currWebURL = _spPageContextInfo.webAbsoluteUrl;
        $.ajax(
        {
            url:  currWebURL + "/_api/web/lists/getbytitle('" + listTitle + "')?$select=Id",
            type: "GET",
            async: false,
            headers: { "Accept": "application/json;odata=verbose" },
            success: function (data, textStatus, xhr) {
                openDialog(currWebURL + '/_layouts/15/Upload.aspx?List={' + data.d.Id + '}&RootFolder=');
            },
            error: function (data, textStatus, xhr) {
                console.error("Error: " + textStatus);
            }
        });
    }
    catch (ex) {
        console.error(ex);
    }
}

The code works properly. it allow user to upload a file and it is saved to actual document library.

But my problem is when I try to select multiple file, it doesn't allow me, where the actual out of the page when I click upload from the document library it allows the multiple file upload.

I have verified both the pages have the same URL. I have tried doing it with static GUID but still no luck.

What am I missing here? Anyone have encountered such issue before?

Edit:

Found that if page is opened from the out of the box library page UI Looks as below, button text for upload is Choose Files:

When I open the same page with custom code, it shows below screen, button text for upload is Choose File.

Answer 1

The REST api does not provide for uploading multiple files in a single call. You would need to write your javascript to loop thru the collection of files and issue individual calls. Refer this one : Upload multiple files with REST API in document library with custom properties

Answer 2

Unfortunately I don't think this is possible when calling the upload.aspx from a custom form. You can set the upload.aspx page to allow the selection of multiple files using this:

$("[id$='InputFile']").attr("multiple", "true");

...and it looks like it will work. It allows you to select more than one file and it displays everything you selected, but it only uploads the first file.

I compared the onclick event of the OK button when called from the library and when called from my custom script and it's different. I tried to mimic the original and it runs without error, but it only uploads the first document.

There must be something under the code that ignores the additional ones but I haven't been able to find it yet.