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.

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

Open
shyamal890 opened this issue Nov 6, 2016 · 33 comments
Open

Dropbox like file picker javascript integration #2028

shyamal890 opened this issue Nov 6, 2016 · 33 comments

Comments

@shyamal890
Copy link

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

@MariusBluem
Copy link
Member

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 nickvergessen changed the title Feature Request: Dropbox like file picker javascript integration Dropbox like file picker javascript integration Nov 7, 2016
@nickvergessen
Copy link
Member

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

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

@loxK
Copy link

loxK commented 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
Copy link

@nickvergessen

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

Am I correct @shyamal890 ?

@mehrdad-shokri
Copy link

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

@nextcloud-bot nextcloud-bot added the stale Ticket or PR with no recent activity label Jun 20, 2018
@skjnldsv

This comment has been minimized.

@skjnldsv skjnldsv removed stale Ticket or PR with no recent activity labels Jun 12, 2019
@loxK

This comment has been minimized.

@skjnldsv

This comment has been minimized.

@loxK
Copy link

loxK commented Jun 13, 2019

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

This comment has been minimized.

@jospoortvliet
Copy link
Member

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

@jancborchardt
Copy link
Member

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.

@jancborchardt jancborchardt reopened this Aug 4, 2019
@skjnldsv

This comment has been minimized.

@skjnldsv skjnldsv added the 1. to develop Accepted and waiting to be taken care of label Aug 5, 2019
@jancborchardt
Copy link
Member

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

@skjnldsv
Copy link
Member

skjnldsv commented Sep 2, 2019

Nice found @jancborchardt
Looks very interesting!

@juliusknorr
Copy link
Member

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

@rullzer
Copy link
Member

rullzer commented Sep 2, 2019

@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
Copy link
Member

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

@pbek
Copy link
Member

pbek commented Aug 6, 2020

I put our Nextcloud WebDAV file picker in the example of https://apps.nextcloud.com/apps/webapppassword.

WebDAV File Picker

screenshot-filepicker

Temporary password generation and WebDAV PROPFIND

screenshot-webdav

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

@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
Copy link
Member

pbek commented 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
Copy link
Member

@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
Copy link
Member

pbek commented 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
Copy link
Member

pbek commented Oct 13, 2020

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

@julien-nc
Copy link
Member

@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
Copy link
Member

pbek commented Oct 26, 2020

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

@julien-nc
Copy link
Member

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

pbek commented Nov 19, 2020

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>

@binford6000
Copy link

@julien-nc Any updates on this topic?
I've been asked from a prospect if we gonna have this in the future...

@pbek
Copy link
Member

pbek commented Dec 1, 2023

@binford6000
Copy link

Thx for the update @pbek ! Looks interesting. Will have a look into it 👍🏻

@pbek
Copy link
Member

pbek commented Dec 1, 2023

I just updated webapppassword for Nextcloud 28. 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests