nextcloud-libraries / nextcloud-dialogs

Nextcloud dialog helpers https://npmjs.org/@nextcloud/dialogs
https://nextcloud-libraries.github.io/nextcloud-dialogs/
GNU Affero General Public License v3.0
19 stars 9 forks source link

addButton is not a function #1353

Closed Thatoo closed 2 months ago

Thatoo commented 3 months ago
export function openFilePickerClipboardOnly() {
    const filePicker = getFilePickerBuilder(t('picker', 'Choose a file to share a link to it'))
        .allowDirectories(true)
        .setMultiSelect(false)
        .build()
    filePicker.pick()
}

works!

However, if I modify it to

export function openFilePickerClipboardOnly() {
    const filePicker = getFilePickerBuilder(t('picker', 'Choose a file to share a link to it'))
        .allowDirectories(true)
        .setMultiSelect(false)
        .addButton({
            label: 'Read Only public share link',
            callback: (nodes) => console.log('Picked', nodes),
            type: 'primary',
        })
        .build()
    filePicker.pick()
}

then it's not working and I get the following error in console : Uncaught TypeError: _nextcloud_dialogs__WEBPACK_IMPORTED_MODULE_4__.getFilePickerBuilder(...).allowDirectories(...).setMultiSelect(...).addButton is not a function

Is this Readme wrong https://github.com/nextcloud-libraries/nextcloud-dialogs?tab=readme-ov-file#use-the-filepickerbuilder ?

Thatoo commented 3 months ago

From which version of @nextcloud/dialogs is it possible to use .addButton({}) with getFilePickerBuilder function?

Thatoo commented 3 months ago

It if from v 4.2.0 whereas Picker app is still using 3.1.2 which is the reason of this error. Now I get a new error :

FilePickerBuilder: When adding custom buttons the `type` must be set to `FilePickerType.Custom`.

However, even if I add .setType(5), I don't get any error anymore, but it doesn't display anything...

With "@nextcloud/dialogs": "^3.1.2", and "@nextcloud/vue": "^7.0.0"

export function openFilePickerClipboardOnly() {
    const filePicker = getFilePickerBuilder(t('picker', 'Choose a file to share a link to it'))
        .allowDirectories(true)
        .setMultiSelect(false)
        .build()
    filePicker.pick()
}

works, but with "@nextcloud/dialogs": "^4.2.0", and "@nextcloud/vue": "^7.12.0"

export function openFilePickerClipboardOnly() {
    const filePicker = getFilePickerBuilder(t('picker', 'Choose a file to share a link to it'))
        .allowDirectories(true)
        .setMultiSelect(false)
        .setType(5)
        .addButton({
            label: 'Read Only public share link',
            callback: (nodes) => console.log('Picked', nodes),
            type: 'primary',
        })
        .build()
    filePicker.pick()
}

doesn't work, and even

export function openFilePickerClipboardOnly() {
    const filePicker = getFilePickerBuilder(t('picker', 'Choose a file to share a link to it'))
        .allowDirectories(true)
        .setMultiSelect(false)
        .build()
    filePicker.pick()
}

doesn't work.

I get the following error:

Failed to load the element <script> from « https://zyuno.local/apps/picker/js/picker-vendors-node_modules_path-browserify_index_js-node_modules_nextcloud_dialogs_dist_chunks_Dial-7445f9.js?v=8ddf27581abc54d78b9b ». NcButton-DhaPcomf.css:1
Failed to load the element <script> from « https://zyuno.local/apps/picker/js/picker-node_modules_nextcloud_dialogs_dist_legacy_mjs.js?v=48ca7785c8fd63087532 ». NcButton-DhaPcomf.css:1
susnux commented 3 months ago

The FilePicker was added with version 4.2 so you need to use 4.2+ (or version 5 or later if you target Nextcloud 28+).

With versions before 4.2 you can only use some limited functions.

For your error:

Failed to load the element Githubissues.

  • Githubissues is a development platform for aggregating issues.