Installation

To install the plugin, execute the following command in your terminal:

cordova plugin add https://github.com/ourcodeworld/cordova-ourcodeworld-filebrowser.git

After the installation, the object OurCodeWorld.Filebrowser will be available in your window. This object offers a file picker, folder picker, mixed folder and file picker and the file creation dialog.

Features

This plugin is a Cordova implementation for Android of the NoNonsense-FilePicker, a file/directory-picker for android.

• Can select multiple items
• Select directories or files, or both
• Create new directories in the picker
• Material theme with AppCompaqt

1. Filepicker

The filepicker property (OurCodeWorld.Filebrowser.filePicker) is an object that contains the methods related to the filepicker.

Single filepicker

This method (OurCodeWorld.Filebrowser.filePicker.single) starts a native filepicker that allow you to select only 1 file.

The single method expects an object as first parameter with the following properties:

• success: a function that handles the success cordova result. The function receives as first and unique parameter an array with the paths of the selected file.
• error: a function that handles the error cordova result. The function receives as first and unique parameter a string with the error description.
• startupPath: [optional] a string (default value "default") with a predetermined start up directory. If providen, the filebrowser will start from that location (file://emulated/0/a-custom-start-path)

The following code will initialize a single filepicker:

// Single file selector
window.OurCodeWorld.Filebrowser.filePicker.single({
    success: function(data){
        if(!data.length){
        // No file selected
        return;
    }

    console.log(data);
    // Array with the file path
    // ["file:///storage/emulated/0/360/security/file.txt"]
    },
    // Start in a custom directory
    //startupPath:"/emulated/0/",
    error: function(err){
        console.log(err);
    }
});

Multi filepicker

This method starts a native filepicker that allow you to select multiple files.

The multi method expects an object as first parameter with the following properties:

• success: a function that handles the success cordova result. The function receives as first and unique parameter an array with the paths of the selected files.
• error: a function that handles the error cordova result. The function receives as first and unique parameter a string with the error description.
• startupPath: [optional] a string (default value "default")with a predetermined start up directory. If providen, the filebrowser will start from that location (file://emulated/0/a-custom-start-path)

The following code will initialize a multiple filepicker:

// Multi file picker
window.OurCodeWorld.Filebrowser.filePicker.multi({
    success: function(data){
        if(!data.length){
            // No file selected
            return;
        }

        console.log(data);
        // Array with filepaths
        // ["file:///storage/emulated/0/360/security/file.txt", "file:///storage/emulated/0/360/security/another-file.txt"]
    },
    // Start in a custom directory
    //startupPath:"/emulated/0/",
    error: function(err){
        console.log(err);
    }
});

2. Folderpicker

The Folderpicker property (OurCodeWorld.Filebrowser.folderPicker) is an object that contains the methods related to the Folderpicker.

Single folderpicker

This method starts a native folder browser that allow you to select only 1 folder.

The single method expects an object as first parameter with the following properties:

• success: a function that handles the success cordova result. The function receives as first and unique parameter an array with the paths of the selected folders.
• error: a function that handles the error cordova result. The function receives as first and unique parameter a string with the error description.
• startupPath: [optional] a string (default value "default")with a predetermined start up directory. If providen, the filebrowser will start from that location (file://emulated/0/a-custom-start-path)

The following code will initialize a multiple filepicker:

// Single folder picker
window.OurCodeWorld.Filebrowser.folderPicker.single({
    success: function(data){
        if(!data.length){
            // No folder selected
            return;
        }

        console.log(data);
        // Array with the folder path
        // ["file:///storage/emulated/0/360/security"]
    },
    // Start in a custom directory
    //startupPath:"/emulated/0/",
    error: function(err){
        console.log(err);
    }
});

Remember that in all the methods, you can change the start location (address) of the dialog by changing the startupPath (in case you want to set the default startup path omit the property or set the value to "default"):

Multiple folderpicker

This method starts a native folder browser that allow you to select multiple folders.

The single method expects an object as first parameter with the following properties:

• success: a function that handles the success cordova result. The function receives as first and unique parameter an array with the paths of the selected folders.
• error: a function that handles the error cordova result. The function receives as first and unique parameter a string with the error description.
• startupPath: [optional] a string (default value "default")with a predetermined start up directory. If providen, the filebrowser will start from that location (file://emulated/0/a-custom-start-path)

The following code will initialize a multiple filepicker:

// Multi folder selector
window.OurCodeWorld.Filebrowser.folderPicker.multi({
    // Start in the Download folder of the device,
    // Note that this parameter can be provide only if you're sure that the folder exists
    startupPath:"/storage/emulated/0/Download",
    success: function(data){
        if(!data.length){
            // No folder selected
            return;
        }

        console.log(data);
        // Array with filepaths
        // ["file:///storage/emulated/0/360/security/file.txt", "file:///storage/emulated/0/360/security/another-file.txt"]
    },
    error: function(err){
        console.log(err);
    }
});

3. Mixed picker

The mixedPicker property OurCodeWorld.Filebrowser.mixedPicker is a function that starts a mixed file and folder picker (allow you to choose files and folders at time).

The config argument (first argument) is an object that can have the following properties:

• success: a function that handles the success cordova result. The function receives as first and unique parameter an array with the selected files and folders.
• error: a function that handles the error cordova result. The function receives as first and unique parameter a string with the error description.
• startupPath: [optional] a string (default value "default")with a predetermined start up directory. If providen, the filebrowser will start from that location (file://emulated/0/a-custom-start-path)

// Start mixed picker
OurCodeWorld.Filebrowser.mixedPicker({
    success: function(data) {
        if(!data.length){
            // No folder or files selected
            return;
        }

        console.log(data);
        // Array with the selected files and folders
        // ["file:///storage/emulated/0/myfile.txt","file:///storage/emulated/0/folder", "file:///storage/emulated/0/other-file.txt"]
    },
    error: function(e) {
        console.error("Error calling Hello Plugin",e);
    }
});

4. Create file dialog

The create file dialog provides an easy native view to create a file in the storage of the device.

The config argument (first argument) is an object that can have the following properties:

• success: a function that handles the success cordova result. The function receives as first and unique parameter an array with the "full path of the created file"
• error: a function that handles the error cordova result. The function receives as first and unique parameter a string with the error description.
• startupPath: [optional] a string (default value "default")with a predetermined start up directory. If providen, the filebrowser will start from that location (file://emulated/0/a-custom-start-path)

OurCodeWorld.Filebrowser.createFileDialog({
    success: function(data) {
        if(!data.length){
            // No file was created
            return;
        }

        console.log(data);
        // Array with the imaginary created file (is up to you how to create it)
        // ["file:///storage/emulated/0/myfile.txt"]
    },
    error: function(e) {
        console.error("Error calling Hello Plugin",e);
    }
});

Read our articles

ADS

Read more articles