WL.fileDialog function

8 out of 19 rated this helpful - Rate this topic

Displays the Microsoft OneDrive file picker, which enables JavaScript-based web apps to display a pre-built, consistent user interface that enables a user to select files to upload and download to and from his or her OneDrive storage location.

Parameters

properties

Required. A JSON object containing the following properties for displaying the button.

NameTypeDescriptionDefault Value

mode

string

Required. Specifies the type of OneDrive file picker to display. Specify "open" to display the download version of the file picker. Specify "save" to display the upload version of the file picker.

None.

select

string

Optional. Specify only if the mode property is set to "open". Specifies how many files the user can select to download. Specify "single" for a single file. Specify "multi" for multiple files.

"single"

lightbox

string

Optional. The color pallette to use for the file picker. Specify "white", "grey", or "transparent".

"white"

 

callback

Optional. A callback function that is executed after the user finishes interacting with the OneDrive file picker.

Note  Although the callback parameter is still supported, we recommend that you use the Promise object instead, which is described later in this topic.

Return value

Returns a Promise object. This object's then method provides the onSuccess and onError parameters to enable your code to handle a successful and failed call to the corresponding WL.fileDialog method, respectively.

Examples

The following example demonstrates how to use the upload version of the OneDrive file picker.


<form>
    <input id="file" name="file" type="file" />
</form>



<button onclick="uploadFile_fileDialog()">Save file with OneDrive file picker (calling WL.filedialog)</button>



function uploadFile_fileDialog() {
    WL.fileDialog({
        mode: "save"
    }).then(
        function (response) {
            WL.upload({
                path: response.data.folders[0].id,
                element: "file",
                overwrite: "rename"
            }).then(
                function (response) {
                    document.getElementById("info").innerText =
                        "File uploaded.";
                },
                function (responseFailed) {
                    document.getElementById("info").innerText =
                        "Error uploading file: " + responseFailed.error.message;
                }
            );
        },
        function (responseFailed) {
            document.getElementById("info").innerText =
                "Error getting folder info: " + responseFailed.error.message;
        }
    );  
}


The following example demonstrates how to use the download version of the file picker.


<button onclick="downloadFile_fileDialog()">Open file with OneDrive file picker (calling WL.filedialog)</button>



function downloadFile_fileDialog() {
    WL.fileDialog({
        mode: "open",
        select: "multi"
    }).then(
        function (response) {
            var msg = "";
            // For each folder selected...
            if (response.data.folders.length > 0) {
                for (folder = 0; folder < response.data.folders.length; folder++) {
                    // Use folder IDs to iterate through child folders and files as needed.
                    msg += "\n" + response.data.folders[folder].id;
                }
            }
            // For each file selected...
            if (response.data.files.length > 0) {
                for (file = 0; file < response.data.files.length; file++) {
                    // Use file IDs to iterate through files as needed.
                    msg += "\n" + response.data.files[file].id;                            
                }
            }
            document.getElementById("info").innerText =
                "Selected folders/files:" + msg;
        },
        function (responseFailed) {
            document.getElementById("info").innerText =
                "Error getting folder/file info: " + responseFailed.error.message;
        }
    );
}


Requirements

Library

Wl.js

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.