-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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.
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
Dropbox like file picker javascript integration #2028
Comments
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 😉 |
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. |
@danielrodriguez That's what you talked about, right? |
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. |
I think @shyamal890 may refer to something like this: Am I correct @shyamal890 ? |
any updates on this? |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Yes I build a webapp and want to add a javascript snippet that allows me to pick a file from nextcloud. |
This comment has been minimized.
This comment has been minimized.
Another example - https://www.dropbox.com/developers/chooser |
Very related: Support for cross-domain WebDAV access (CORS) #3131 It would certainly be great for app developers outside our Nextcloud bubble to be able to offer Nextcloud support. |
This comment has been minimized.
This comment has been minimized.
This nextcloud-link library would be something that could be used by other apps, right? |
Nice found @jancborchardt |
@rullzer had the idea of making use of oauth pkce for this, but I couldn't find any ticket for that yet. |
Yeah the main issue with all of this is auth. It is on my list to dive into it properly but 18 at the earliest. |
Assuming delays of DB you maybe have so much time that you even can finish it… 🙃 |
I put our Nextcloud WebDAV file picker in the example of https://apps.nextcloud.com/apps/webapppassword. WebDAV File PickerTemporary password generation and WebDAV PROPFINDThere is an example implementation 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? |
@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. |
@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. |
Thank you, @eneiluj 😁 Out of curiosity, do you already have a use case where you want to put the vue.js filepicker? 😀 |
@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 |
@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 I'm stuck trying to understand how to use |
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... document.querySelector('#file-sink').files = files;
|
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. |
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 <button onclick="openFilePicker()">Open file picker</button>
<dbp-file-source lang="en"></dbp-file-source>
<dbp-file-sink lang="en"></dbp-file-sink>
<script>
const fileSource = document.querySelector("dbp-file-source");
const fileSink = document.querySelector("dbp-file-sink");
// Listen to the event from file source
fileSource.addEventListener("dbp-file-source-file-selected", (ev) => {
const file = ev.detail.file;
console.log("File selected: ", file)
// This will open the file sink dialog
fileSink.files = [file];
});
function openFilePicker() {
// This will open the file source dialog
fileSource.setAttribute("dialog-open", "");
}
</script>
<script type="module" src="node_modules/@dbp-toolkit/file-handling/dist/dbp-file-source.js"></script>
<script type="module" src="node_modules/@dbp-toolkit/file-handling/dist/dbp-file-sink.js"></script> |
@julien-nc Any updates on this topic? |
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. |
Thx for the update @pbek ! Looks interesting. Will have a look into it 👍🏻 |
I just updated webapppassword for Nextcloud 28. 😉 |
It would be great to have nextcloud file picker integration for webapps.
The text was updated successfully, but these errors were encountered: