Server: Dropbox like file picker javascript integration

[shyamal890]

It would be great to have nextcloud file picker integration for webapps.

[MariusBluem]

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 😉

[nickvergessen]

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]

@danielrodriguez That's what you talked about, right?

[loxK]

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]

@nickvergessen

I think @shyamal890 may refer to something like this:
https://developers.google.com/drive/v3/web/picker

Am I correct @shyamal890 ?

[mehrdad-shokri]

any updates on this?
@shyamal890 did you solve this need?

[skjnldsv]

We have this already OC.dialogs.filepicker

[loxK]

It cannot be used from an external app or webapp

[skjnldsv]

@loxK you mean not as a nextcloud app?

[loxK]

Yes I build a webapp and want to add a javascript snippet that allows me to pick a file from nextcloud.
This is pretty much it: https://developers.google.com/drive/api/v3/picker and what is about this issue.

[skjnldsv]

Ah sorry, I misunderstood.
Then I let this closed as this is out of scope for us.

As this sounds like a nice feature, currently there a no plans to implement such a feature. This does not mean we don't want this feature, but it is simply not on our roadmap for the near future. If somebody wants to implement this feature nevertheless we are happy to assist and help out.

[jospoortvliet]

Another example - https://www.dropbox.com/developers/chooser

[jancborchardt]

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.

[skjnldsv]

@jancborchardt yes, but this is too much of a job for us.
We need to draw a line :)

[jancborchardt]

This nextcloud-link library would be something that could be used by other apps, right?

[skjnldsv]

Nice found @jancborchardt
Looks very interesting!

[juliushaertl]

@rullzer had the idea of making use of oauth pkce for this, but I couldn't find any ticket for that yet.

[rullzer]

@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.
Maybe I can hack a bit on the train to the conf.

[tobiasKaminsky]

Maybe I can hack a bit on the train to the conf.

Assuming delays of DB you maybe have so much time that you even can finish it… :upside_down_face:

[pbek]

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.

[eneiluj]

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

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

[eneiluj]

@pbek Yeah I used it (it's awesome :grin:) 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]

Thank you, @eneiluj 😁 Out of curiosity, do you already have a use case where you want to put the vue.js filepicker? 😀

[pbek]

I'll discuss if we can already open the repository to the public.

@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

[eneiluj]

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

[pbek]

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?

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 files property which you can set directly from outside the file-sink web-component. See: https://www.w3schools.com/js/js_object_properties.asp

document.querySelector('#file-sink').files = files;

File as in https://developer.mozilla.org/en-US/docs/Web/API/File

[eneiluj]

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.

document.querySelector('#file-sink').files = files;

Perfect, thanks. Will try that.

[pbek]

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.

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