You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Dropbox like file picker javascript integration #2028
This would require an open API for our file picker to integrate this into 3rdparty-applications ... I've seen some apps out there simply using WebDAV to access the files on Nextcloud 😉
changed the title [-]Feature Request: Dropbox like file picker javascript integration[/-][+]Dropbox like file picker javascript integration[/+]on Nov 7, 2016
I think he is more likely referring to a file picker that third party app, or nextcloud app running in an iframe, could easily use to get a file, or file URL, from nextcloud in a nice dialog picker respecting the nextcloud look and feel.
Having to use a the webdav api and having to build an UI is overkilled. See how Rainloop are struggling to implement a simple nextcloud file picker whereas they have implemented with ease a Google Drive file picker.
Need developers to add Nextcloud support to their apps ? Make it easy for them to do so.
There is an example implementation
that uses this app to generate a temporary password and make a WebDAV request to a Nextcloud instance (docker container included).
See Example for a Nextcloud WebDAV file picker example that uses this application.
@pbek Wow this is great! I would like to play with the filepicker and potentially bundle it in a Vue component. Could you give me access to https://gitlab.tugraz.at/dbp/web-components (which appears to be private) so I can get the filepicker sources?
@pbek Yeah I used it (it's awesome 😁) and then failed to use the files provided there in a Vue component. That's why I'd like to try with the file picker sources.
@pbek Sorry for the late answer. Thanks a lot for the sources.
This file picker could be used in any website/web application. I don't have a precise use case for the moment. It would be great to "bundle" it a little bit and make it available as a standalone component for anyone who wants to integrate a Nextcloud file storage in their system.
I made a small change to allow passing login and password (as optional attributes) to the top element dbp-file-source and avoid seeing the authentication popup. I can provide the patch if you're interested.
I'm stuck trying to understand how to use dbp-file-source or dbp-file-sink to upload files to Nextcloud. It seems dbp-file-sink should react to the files property update but I didn't find how to do that from the "outside". Is there an example somewhere?
It would be great to "bundle" it a little bit and make it available as a standalone component for anyone who wants to integrate a Nextcloud file storage in their system.
We are planning to create bundles for all web components in the future that can directly be included to a webpage. 😀
I made a small change to allow passing login and password (as optional attributes) to the top element dbp-file-source and avoid seeing the authentication popup. I can provide the patch if you're interested.
We wanted to avoid entering (and storing) usernames and passwords. 😉
I'm stuck trying to understand how to use dbp-file-source or dbp-file-sink to upload files to Nextcloud. It seems dbp-file-sink should react to the files property update but I didn't find how to do that from the "outside". Is there an example somewhere?
We are planning to create bundles for all web components in the future that can directly be included to a webpage.
That would be nice.
We wanted to avoid entering (and storing) usernames and passwords
I was not explicit enough. The goal is not to prompt the user or to store anything. It is rather to allow the developer to inject credentials coming from somewhere else.
You can now also install the file-handling components via npm!
npm i @dbp-toolkit/file-handling
After you have installed the file handling components via npm you can use this example to get a button
that opens the file source dialog. After you have selected a file you will see it in your browser log,
and the file sink dialog will open, so you are able to store the file again.
<buttononclick="openFilePicker()">Open file picker</button><dbp-file-sourcelang="en"></dbp-file-source><dbp-file-sinklang="en"></dbp-file-sink><script>constfileSource=document.querySelector("dbp-file-source");constfileSink=document.querySelector("dbp-file-sink");// Listen to the event from file sourcefileSource.addEventListener("dbp-file-source-file-selected",(ev)=>{constfile=ev.detail.file;console.log("File selected: ",file)// This will open the file sink dialogfileSink.files=[file];});functionopenFilePicker(){// This will open the file source dialogfileSource.setAttribute("dialog-open","");}</script><scripttype="module" src="node_modules/@dbp-toolkit/file-handling/dist/dbp-file-source.js"></script><scripttype="module" src="node_modules/@dbp-toolkit/file-handling/dist/dbp-file-sink.js"></script>
Activity
MariusBluem commentedon Nov 6, 2016
This would require an open API for our file picker to integrate this into 3rdparty-applications ... I've seen some apps out there simply using WebDAV to access the files on Nextcloud 😉
[-]Feature Request: Dropbox like file picker javascript integration[/-][+]Dropbox like file picker javascript integration[/+]nickvergessen commentedon Nov 7, 2016
Yeah WebDAV is our public API for that.
Other than that I fail to understand what you are talking about. So a screenshot or more then one line of text would help.
MorrisJobke commentedon Feb 8, 2017
@danielrodriguez That's what you talked about, right?
loxK commentedon Jun 1, 2017
I think he is more likely referring to a file picker that third party app, or nextcloud app running in an iframe, could easily use to get a file, or file URL, from nextcloud in a nice dialog picker respecting the nextcloud look and feel.
Example with google drive: https://gist.github.com/Daniel15/5994054
Having to use a the webdav api and having to build an UI is overkilled. See how Rainloop are struggling to implement a simple nextcloud file picker whereas they have implemented with ease a Google Drive file picker.
Need developers to add Nextcloud support to their apps ? Make it easy for them to do so.
esanzgar commentedon Jun 19, 2017
@nickvergessen
I think @shyamal890 may refer to something like this:
https://developers.google.com/drive/v3/web/picker
Am I correct @shyamal890 ?
mehrdad-shokri commentedon Oct 23, 2017
any updates on this?
@shyamal890 did you solve this need?
skjnldsv commentedon Jun 12, 2019
17 remaining items
pbek commentedon Aug 6, 2020
I put our Nextcloud WebDAV file picker in the example of https://apps.nextcloud.com/apps/webapppassword.
WebDAV File Picker
Temporary password generation and WebDAV PROPFIND
There is an example implementation
that uses this app to generate a temporary password and make a WebDAV request to a Nextcloud instance (docker container included).
See Example for a Nextcloud WebDAV file picker example that uses this application.
julien-nc commentedon Oct 12, 2020
@pbek Wow this is great! I would like to play with the filepicker and potentially bundle it in a Vue component. Could you give me access to https://gitlab.tugraz.at/dbp/web-components (which appears to be private) so I can get the filepicker sources?
pbek commentedon Oct 12, 2020
@eneiluj, sure, I'll discuss if we can already open the repository to the public. Meanwhile you can play with the built version of it from https://gitlab.tugraz.at/dbp/nextcloud/webapppassword/-/tree/master/docs/example if you like.
julien-nc commentedon Oct 12, 2020
@pbek Yeah I used it (it's awesome 😁) and then failed to use the files provided there in a Vue component. That's why I'd like to try with the file picker sources.
Thanks for your answer.
pbek commentedon Oct 12, 2020
Thank you, @eneiluj 😁 Out of curiosity, do you already have a use case where you want to put the vue.js filepicker? 😀
pbek commentedon Oct 13, 2020
@eneiluj, meanwhile I extracted you what's needed to build the file-picker here: https://gitlab.tugraz.at/dbp/nextcloud/webapppassword/-/tree/master/docs/example/src
julien-nc commentedon Oct 26, 2020
@pbek Sorry for the late answer. Thanks a lot for the sources.
This file picker could be used in any website/web application. I don't have a precise use case for the moment. It would be great to "bundle" it a little bit and make it available as a standalone component for anyone who wants to integrate a Nextcloud file storage in their system.
I made a small change to allow passing login and password (as optional attributes) to the top element
dbp-file-sourceand avoid seeing the authentication popup. I can provide the patch if you're interested.I'm stuck trying to understand how to use
dbp-file-sourceordbp-file-sinkto upload files to Nextcloud. It seemsdbp-file-sinkshould react to thefilesproperty update but I didn't find how to do that from the "outside". Is there an example somewhere?pbek commentedon Oct 26, 2020
We are planning to create bundles for all web components in the future that can directly be included to a webpage. 😀
We wanted to avoid entering (and storing) usernames and passwords. 😉
The repo with a good example is also still closed. I'll put that on the list for discussion too...
But basically it's like stated in https://gitlab.tugraz.at/dbp/nextcloud/webapppassword/-/blob/master/docs/example/src/packages/file-handling/README.md, there is a
filesproperty which you can set directly from outside the file-sink web-component. See: https://www.w3schools.com/js/js_object_properties.aspFileas in https://developer.mozilla.org/en-US/docs/Web/API/Filejulien-nc commentedon Oct 26, 2020
That would be nice.
I was not explicit enough. The goal is not to prompt the user or to store anything. It is rather to allow the developer to inject credentials coming from somewhere else.
Perfect, thanks. Will try that.
pbek commentedon Nov 19, 2020
You can now also install the file-handling components via npm!
After you have installed the file handling components via npm you can use this example to get a button
that opens the file source dialog. After you have selected a file you will see it in your browser log,
and the file sink dialog will open, so you are able to store the file again.
binford6000 commentedon Dec 1, 2023
@julien-nc Any updates on this topic?
I've been asked from a prospect if we gonna have this in the future...
pbek commentedon Dec 1, 2023
We are still using https://github.com/digital-blueprint/webapppassword on the Nextcloud server and https://github.com/digital-blueprint/toolkit/tree/main/packages/file-handling in the frontend applications.
binford6000 commentedon Dec 1, 2023
Thx for the update @pbek ! Looks interesting. Will have a look into it 👍🏻
pbek commentedon Dec 1, 2023
I just updated webapppassword for Nextcloud 28. 😉