Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

addButton is not a function #1353

Closed
Thatoo opened this issue Jun 10, 2024 · 11 comments
Closed

addButton is not a function #1353

Thatoo opened this issue Jun 10, 2024 · 11 comments

Comments

@Thatoo
Copy link

Thatoo commented Jun 10, 2024 •
edited
Loading 

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
Copy link
Author

Thatoo commented Jun 11, 2024

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

@Thatoo
Copy link
Author

Thatoo commented Jun 11, 2024 •
edited
Loading

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
Copy link
Contributor

susnux commented Jun 21, 2024

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 <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

How do you bundle your app? This looks like you somehow include CSS imports in your final bundle which does not work for browsers but you have to either extract CSS to a file or inject inline (webpack or vite plugin).

@Thatoo
Copy link
Author

Thatoo commented Jun 21, 2024

Thank you @susnux for coming back to me.

I'm trying to improve this app : https://github.com/nextcloud/picker

Here is my work : https://github.com/Thatoo/picker/blob/ClipboardOnly/src/main.js

@Thatoo
Copy link
Author

Thatoo commented Jul 19, 2024 •
edited
Loading

@susnux
@nextcloud/dialogs 4.2 needs @nextcloud/vue right?
Does that imply other needs such as "vue" or "vue-material-design-icons" version?

I ask that because now I get these error in my web browser consol :

[Vue warn]: Error in mounted hook (Promise/async): "TypeError: context is undefined"

found in

---> <FilePicker>
       <Root> [vue.runtime.esm.js:4605](webpack:///picker/node_modules/vue/dist/vue.runtime.esm.js)
    VueJS 30
    render legacy.mjs:36
    VueJS 8
    M legacy.mjs:33
    z legacy.mjs:100
    pick index-CRno7JSe.mjs:17
    pick index-CRno7JSe.mjs:10
    openFilePicker main.js:115
    <anonyme> main.js:131
    (Asynchrone : EventListener.handleEvent)
    <anonyme> main.js:122
    <anonyme> picker-main.js:70932
    <anonyme> picker-main.js:70934
TypeError: context is undefined
    request request.js:71
    node_modules NextJS
    get index.js:2
    execute index.js:2
    patchInline index.js:2
    Q index.js:2
    K index.js:2
    H index.js:2
    Ne index.js:2
    Ne index.js:2
    getDirectoryContents index.js:2
    C FilePicker-oSc3I_BN.mjs:876
    loadFiles FilePicker-oSc3I_BN.mjs:887
    node_modules NextJS
    VueJS 25
    render legacy.mjs:36
    VueJS 8
    M legacy.mjs:33
    z legacy.mjs:100
    pick index-CRno7JSe.mjs:17
    pick index-CRno7JSe.mjs:10
    openFilePicker main.js:115
    <anonymous> main.js:131
    EventListener.handleEvent* main.js:122
    <anonymous> picker-main.js:70932
    <anonymous> picker-main.js:70934
[vue.runtime.esm.js:3049](webpack:///picker/node_modules/vue/dist/vue.runtime.esm.js)
[Vue warn]: Error in render: "RangeError: invalid array length"

found in

---> <FileList>
       <NcModal>
         <DialogBase>
           <FilePicker>
             <Root> [vue.runtime.esm.js:4605](webpack:///picker/node_modules/vue/dist/vue.runtime.esm.js)
RangeError: invalid array length
    renderList VueJS
    ot FilePicker-oSc3I_BN.mjs:484
    VueJS 13
    node_modules NextJS
    VueJS 4
    r FilePicker-oSc3I_BN.mjs:459
    node_modules NextJS
    VueJS 25
    render legacy.mjs:36
    VueJS 8
    M legacy.mjs:33
    z legacy.mjs:100
    pick index-CRno7JSe.mjs:17
    pick index-CRno7JSe.mjs:10
    openFilePicker main.js:115
    <anonymous> main.js:131
    EventListener.handleEvent* main.js:122
    <anonymous> picker-main.js:70932
    <anonymous> picker-main.js:70934

@Thatoo
Copy link
Author

Thatoo commented Jul 19, 2024

If I add
import '@nextcloud/dialogs/style.css'
below
import { showError, getFilePickerBuilder } from '@nextcloud/dialogs'
I get the following error when I try to build
10:8 error Unable to resolve path to module '@nextcloud/dialogs/style.css' import/no-unresolved

@susnux
Copy link
Contributor

susnux commented Jul 19, 2024

Does that imply other needs such as "vue" or "vue-material-design-icons" version?

Vue 2 is required then, others are dependencies and will be installed as needed.

10:8 error Unable to resolve path to module '@nextcloud/dialogs/style.css' import/no-unresolved

That plugin is simply broken, I think you can disable that ESLint plugin, the issue is open for a looong time:
import-js/eslint-plugin-import#1810

@Thatoo
Copy link
Author

Thatoo commented Jul 20, 2024

Could you tell me how to disable import/no-unresolved eslint plugin? In other word, how should I modify https://github.com/nextcloud/picker/blob/main/.eslintrc.js ?

@Thatoo
Copy link
Author

Thatoo commented Jul 21, 2024 •
edited
Loading

I found it. I needed to add
"import/no-unresolved": "off" to "rules" of .eslintrc.js

Now I have a prettier window thanks to css

image

but it doesn't display files and I keep having errors in console listed earlier

[Vue warn]: Error in mounted hook (Promise/async): "TypeError: context is undefined"

found in

---> <FilePicker>
       <Root> [vue.runtime.esm.js:4605](webpack:///picker/node_modules/vue/dist/vue.runtime.esm.js)
    VueJS 30
    render legacy.mjs:36
    VueJS 8
    M legacy.mjs:33
    z legacy.mjs:100
    pick index-CRno7JSe.mjs:17
    pick index-CRno7JSe.mjs:10
    openFilePicker main.js:122
    <anonyme> main.js:137
    (Asynchrone : EventListener.handleEvent)
    <anonyme> main.js:128
    <anonyme> picker-main.js:71089
    <anonyme> picker-main.js:71091
TypeError: context is undefined
    request request.js:71
    node_modules NextJS
    get index.js:2
    execute index.js:2
    patchInline index.js:2
    Q index.js:2
    K index.js:2
    H index.js:2
    Ne index.js:2
    Ne index.js:2
    getDirectoryContents index.js:2
    C FilePicker-oSc3I_BN.mjs:876
    loadFiles FilePicker-oSc3I_BN.mjs:887
    node_modules NextJS
    VueJS 25
    render legacy.mjs:36
    VueJS 8
    M legacy.mjs:33
    z legacy.mjs:100
    pick index-CRno7JSe.mjs:17
    pick index-CRno7JSe.mjs:10
    openFilePicker main.js:122
    <anonymous> main.js:137
    EventListener.handleEvent* main.js:128
    <anonymous> picker-main.js:71089
    <anonymous> picker-main.js:71091
[vue.runtime.esm.js:3049](webpack:///picker/node_modules/vue/dist/vue.runtime.esm.js)
    VueJS 29
    render legacy.mjs:36
    VueJS 8
    M legacy.mjs:33
    z legacy.mjs:100
    pick index-CRno7JSe.mjs:17
    pick index-CRno7JSe.mjs:10
    openFilePicker main.js:122
    <anonyme> main.js:137
    (Asynchrone : EventListener.handleEvent)
    <anonyme> main.js:128
    <anonyme> picker-main.js:71089
    <anonyme> picker-main.js:71091

from nextcloud/picker#42

@Thatoo
Copy link
Author

Thatoo commented Jul 22, 2024

I wonder, are nextcloud/dialogs v4.2 and nextcloud/vue v7.12 working on nextcloud v28?

@Thatoo
Copy link
Author

Thatoo commented Jul 25, 2024

I tried with the latest release @nextcloud/dialogs v 5.3.5 and @nextcloud/vue v 8.15.0, and it fully works!
Thank you @provokateurin for your help and patience.

@Thatoo Thatoo closed this as completed Jul 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Thatoo @susnux